agentchannel 0.8.1 → 0.9.1

package/ui/app.js

@@ -4,7 +4,8 @@
 // ---------------------------------------------------------------------------
 // API Adapter Layer — auto-detect environment
 // ---------------------------------------------------------------------------
-const isTauri = !!window.__TAURI__;
+var isTauri = window.isTauri || !!window.__TAURI__;
+
 
 const API = isTauri ? {
   invoke: window.__TAURI__.core.invoke,
@@ -45,6 +46,95 @@ var dmNames = {}; // theirFingerprint -> display name
 var encoder = new TextEncoder();
 var decoder = new TextDecoder();
 
+// ---------------------------------------------------------------------------
+// Sidebar collapse/expand
+// ---------------------------------------------------------------------------
+function toggleSidebar() {
+  var el = document.getElementById('sidebar');
+  el.style.width = '';
+  el.classList.toggle('collapsed');
+  var collapsed = el.classList.contains('collapsed');
+  localStorage.setItem('ac-sidebar-collapsed', collapsed);
+  if (!collapsed) {
+    var saved = localStorage.getItem('ac-width-sidebar');
+    if (saved) el.style.width = saved;
+  }
+}
+function toggleMembers() {
+  var el = document.getElementById('members-panel');
+  el.style.width = '';
+  el.classList.toggle('collapsed');
+  var collapsed = el.classList.contains('collapsed');
+  localStorage.setItem('ac-members-collapsed', collapsed);
+  if (!collapsed) {
+    var saved = localStorage.getItem('ac-width-members-panel');
+    if (saved) el.style.width = saved;
+  }
+  var badge = document.getElementById('members-badge');
+  if (badge) badge.classList.toggle('hidden', !collapsed);
+}
+window.toggleSidebar = toggleSidebar;
+window.toggleMembers = toggleMembers;
+
+// Drag resize sidebars
+(function() {
+  function setupResize(handleId, targetId, side) {
+    var handle = document.getElementById(handleId);
+    if (!handle) return;
+    var dragging = false;
+    handle.addEventListener('mousedown', function(e) {
+      dragging = true;
+      handle.classList.add('active');
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      e.preventDefault();
+    });
+    document.addEventListener('mousemove', function(e) {
+      if (!dragging) return;
+      var target = document.getElementById(targetId);
+      if (!target || target.classList.contains('collapsed')) return;
+      if (side === 'left') {
+        var w = Math.max(180, Math.min(400, e.clientX));
+        target.style.width = w + 'px';
+      } else {
+        var w = Math.max(140, Math.min(350, window.innerWidth - e.clientX));
+        target.style.width = w + 'px';
+      }
+    });
+    document.addEventListener('mouseup', function() {
+      if (dragging) {
+        dragging = false;
+        handle.classList.remove('active');
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        var target = document.getElementById(targetId);
+        if (target && target.style.width) {
+          localStorage.setItem('ac-width-' + targetId, target.style.width);
+        }
+      }
+    });
+  }
+  setupResize('resize-left', 'sidebar', 'left');
+  setupResize('resize-right', 'members-panel', 'right');
+  // Restore saved widths
+  ['sidebar', 'members-panel'].forEach(function(id) {
+    var saved = localStorage.getItem('ac-width-' + id);
+    var el = document.getElementById(id);
+    if (saved && el && !el.classList.contains('collapsed')) {
+      el.style.width = saved;
+    }
+  });
+})();
+// Restore collapsed state on load
+(function() {
+  if (localStorage.getItem('ac-sidebar-collapsed') === 'true') {
+    document.getElementById('sidebar').classList.add('collapsed');
+  }
+  if (localStorage.getItem('ac-members-collapsed') === 'true') {
+    document.getElementById('members-panel').classList.add('collapsed');
+  }
+})();
+
 function getColor(name) {
   if (!senderColors[name]) senderColors[name] = COLORS[Object.keys(senderColors).length % COLORS.length];
   return senderColors[name];
@@ -91,6 +181,7 @@ 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];
@@ -138,11 +229,11 @@ function chId(ch) {
 }
 
 function chLabel(ch) {
-  return ch.subchannel ? '##' + ch.subchannel : '#' + ch.channel;
+  return ch.subchannel ? '#' + ch.channel + '/' + ch.subchannel : '#' + ch.channel;
 }
 
 function chFullLabel(ch) {
-  return ch.subchannel ? '#' + ch.channel + ' ##' + ch.subchannel : '#' + ch.channel;
+  return ch.subchannel ? '#' + ch.channel + '/' + ch.subchannel : '#' + ch.channel;
 }
 
 var INLINE_TAG_COLORS = {
@@ -153,7 +244,7 @@ var INLINE_TAG_COLORS = {
 };
 
 // ---------------------------------------------------------------------------
-// Rich text rendering (markdown + @mentions + #channels + ##subchannels)
+// Rich text rendering (markdown + @mentions + #channels + /subchannels)
 // ---------------------------------------------------------------------------
 function richText(t) {
   // Let marked parse markdown (preserves code blocks with <pre><code>)
@@ -163,10 +254,10 @@ function richText(t) {
   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 ##)
+  // Replace /subchannel references in message text
   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>'
+    s = s.split('/' + knownSubs[ki]).join(
+      '<span class="channel-tag" onclick="window.switchToSub(\'' + knownSubs[ki] + '\')">/' + knownSubs[ki] + '</span>'
     );
   }
   // Replace #channel references
@@ -262,12 +353,23 @@ function render() {
     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);
+      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 += '<div class="conversation__text">' + richText(msg.content) + '</div>';
+    if (msg.subject) {
+      html += '<div class="conversation__subject">' + esc(msg.subject) + '</div>';
+    }
+    if (msg.tags && msg.tags.length) {
+      html += '<div class="conversation__tags">' + msg.tags.map(function(t) { return '<span class="tag">[' + esc(t) + ']</span>'; }).join(' ') + '</div>';
+    }
+    if (msg.retracted) {
+      html += '<div class="conversation__text retracted"><span class="retracted-label">retracted</span>' + richText(msg.content) + '</div>';
+    } else {
+      html += '<div class="conversation__text">' + richText(msg.content) + '</div>';
+    }
+    html += '<button class="msg-copy" data-msg="' + esc(msg.content || '').replace(/"/g, '&quot;') + '" onclick="window.copyMsg(this)">copy</button>';
 
     lastSender = msg.sender;
     lastChannel = msg.channel;
@@ -277,6 +379,16 @@ function render() {
 
   msgsEl.innerHTML = html;
   scrollEl.scrollTop = scrollEl.scrollHeight;
+
+  // Announcement mode: disable input for non-owners
+  var msgInput = document.getElementById('msg-input');
+  if (msgInput) {
+    var chName = activeChannel.split('/')[0];
+    var meta = channelMetas[chName];
+    var isAnnouncement = meta && meta.mode === 'announcement' && (!CONFIG.fingerprint || meta.owners.indexOf(CONFIG.fingerprint) === -1);
+    msgInput.disabled = !!isAnnouncement;
+    msgInput.placeholder = isAnnouncement ? 'This is an announcement channel (read-only)' : 'Type a message...';
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -287,6 +399,8 @@ function renderSidebar() {
   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>';
+  var syncOnIcon = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21.5 2v6h-6M2.5 22v-6h6"/><path d="M2.5 11.5a10 10 0 0 1 17.5-5.5M21.5 12.5a10 10 0 0 1-17.5 5.5"/></svg>';
+  var syncOffIcon = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M2.5 22v-6h6"/><path d="M2.5 11.5a10 10 0 0 1 17.5-5.5M21.5 12.5a10 10 0 0 1-17.5 5.5"/></svg>';
 
   // Sort channels alphabetically, group subchannels under parent
   var sorted = CONFIG.channels.slice().sort(function(a, b) { return chId(a).localeCompare(chId(b)); });
@@ -370,23 +484,38 @@ function renderSidebar() {
     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>' : "");
-
+    var isSynced = ch.sync !== undefined ? ch.sync : !isOfficial;
+    // Left: # + name + lock (private only, public has no icon)
+    var chHash = (window.acChannels && window.acChannels[cid]) ? window.acChannels[cid].channelHash : '';
+    var shortId = chHash ? chHash.slice(0, 4) : '';
+    var leftPart = '<span style="display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden">' +
+      '<span style="color:var(--accent);flex-shrink:0;opacity:0.7">#</span>' +
+      '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(ch.channel) + '</span>' +
+      (shortId && !isOfficial ? '<span style="opacity:0.3;font-size:0.7em;margin-left:3px;flex-shrink:0">(' + shortId + ')</span>' : '') +
+      (!isOfficial ? '<span style="opacity:0.35;flex-shrink:0;display:inline-flex;margin-left:2px">' + lockIcon + '</span>' : '') +
+      '</span>';
+    // Right: badge + sync + arrow (flex-end, icons only on hover except badge)
+    var rightPart = '<span class="sidebar__channel-actions" style="display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0">';
+    if (count) rightPart += '<span class="badge">' + count + '</span>';
+    rightPart += '<span class="sync-toggle" data-channel="' + esc(ch.channel) + '" data-synced="' + (isSynced ? '1' : '0') + '" title="' + (isSynced ? 'Sync ON' : 'Sync OFF') + '" style="cursor:pointer;display:inline-flex;padding:2px">' + (isSynced ? syncOnIcon : syncOffIcon) + '</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";
+      rightPart += '<span class="sidebar__arrow" data-ch="' + esc(ch.channel) + '" data-collapsed="' + (collapsed ? '1' : '0') + '" style="cursor:pointer;font-size:0.5rem;opacity:0.4;padding:2px 2px;display:inline-flex">' + (collapsed ? '\u25B6' : '\u25BC') + '</span>';
+    } else if (!isOfficial) {
+      rightPart += '<span style="font-size:0.5rem;padding:2px 2px;display:inline-flex;visibility:hidden">\u25BC</span>';
+    }
+    rightPart += '</span>';
+    div.innerHTML = leftPart + rightPart;
+
+    // Arrow click handler (delegated)
+    var arrowEl = div.querySelector('.sidebar__arrow');
+    if (arrowEl) {
       (function(chName, wasCollapsed) {
-        arrowBtn.onclick = function(e) {
+        arrowEl.onclick = function(e) {
           e.stopPropagation();
           collapsedGroups[chName] = !wasCollapsed;
           renderSidebar();
         };
       })(ch.channel, collapsed);
-      div.appendChild(arrowBtn);
     }
 
     (function(chObj, channelId) {
@@ -413,14 +542,14 @@ function renderSidebar() {
         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>' : "");
+        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;
+            headerName.textContent = "#" + ch.channel + "/" + subObj.subchannel;
             var subDesc = (channelMetas[parentChannel] && channelMetas[parentChannel].descriptions && channelMetas[parentChannel].descriptions[subObj.subchannel]) || "";
-            headerDesc.textContent = "#" + parentChannel + (subDesc ? " \u00B7 " + subDesc : "");
+            headerDesc.textContent = subDesc;
             document.title = "AgentChannel";
             history.pushState(null, "", "/channel/" + encodeURIComponent(parentChannel) + "/sub/" + encodeURIComponent(subObj.subchannel));
             renderSidebar();
@@ -432,8 +561,112 @@ function renderSidebar() {
       }
     }
   }
+
+  // + Create channel button
+  var createDiv = document.createElement("div");
+  createDiv.className = "sidebar__channel sidebar__create";
+  createDiv.innerHTML = '<span style="color:var(--accent);margin-right:4px;font-size:0.9rem">+</span> Create channel';
+  createDiv.onclick = function() { window.openCreateChannel(); };
+  el.appendChild(createDiv);
 }
 
+// ---------------------------------------------------------------------------
+// Create channel modal
+// ---------------------------------------------------------------------------
+window.openCreateChannel = function() {
+  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:380px;max-width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.5)">' +
+    '<h3 style="font-size:1rem;color:var(--text);margin-bottom:18px">Create channel</h3>' +
+    '<div style="font-size:0.7rem;color:var(--text-secondary);margin-bottom:5px">Channel name</div>' +
+    '<input id="create-ch-name" placeholder="my-project" autocomplete="off" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;font-size:0.88rem;background:var(--bg-alt);color:var(--text);outline:none;margin-bottom:16px;-webkit-appearance:none" onfocus="this.style.borderColor=\'var(--accent-brand)\'" onblur="this.style.borderColor=\'var(--border)\'" autofocus>' +
+    '<div style="font-size:0.7rem;color:var(--text-secondary);margin-bottom:5px">Description <span style="color:var(--text-muted)">(optional — rules, purpose, what to post)</span></div>' +
+    '<textarea id="create-ch-desc" placeholder="e.g. CI alerts from GitHub Actions. Only post failures." rows="2" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;font-size:0.82rem;background:var(--bg-alt);color:var(--text);outline:none;margin-bottom:16px;resize:vertical;font-family:inherit;-webkit-appearance:none" onfocus="this.style.borderColor=\'var(--accent-brand)\'" onblur="this.style.borderColor=\'var(--border)\'"></textarea>' +
+    '<input type="hidden" id="create-ch-public" value="0">' +
+    '<div style="display:flex;gap:0;margin-bottom:12px;border:1px solid var(--border);border-radius:6px;overflow:hidden">' +
+    '<button id="create-tab-private" onclick="window.setChType(false)" style="flex:1;padding:7px;border:none;background:var(--accent-brand);color:#0a0a0a;font-size:0.78rem;cursor:pointer;font-weight:500">Private</button>' +
+    '<button id="create-tab-public" onclick="window.setChType(true)" style="flex:1;padding:7px;border:none;background:var(--bg-alt);color:var(--text-secondary);font-size:0.78rem;cursor:pointer;font-weight:400">Public</button>' +
+    '</div>' +
+    '<div style="font-size:0.68rem;color:var(--text-muted);margin-bottom:18px;line-height:1.4" id="create-ch-hint">Invite only. Your agents auto-join. End-to-end encrypted.</div>' +
+    '<div style="display:flex;gap:8px;justify-content:flex-end">' +
+    '<button onclick="this.closest(\'div[style*=fixed]\').remove()" style="padding:7px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-alt);color:var(--text);cursor:pointer;font-size:0.78rem">Cancel</button>' +
+    '<button id="create-ch-btn" onclick="window.doCreateChannel()" style="padding:7px 14px;border:none;border-radius:6px;background:var(--text);color:var(--bg);cursor:pointer;font-size:0.78rem;font-weight:600">Create</button>' +
+    '</div></div>';
+
+  document.body.appendChild(overlay);
+  document.getElementById('create-ch-name').focus();
+
+  window.setChType = function(isPublic) {
+    document.getElementById('create-ch-public').value = isPublic ? '1' : '0';
+    var priv = document.getElementById('create-tab-private');
+    var pub = document.getElementById('create-tab-public');
+    var hint = document.getElementById('create-ch-hint');
+    priv.style.background = isPublic ? 'var(--bg-alt)' : 'var(--accent-brand)';
+    priv.style.color = isPublic ? 'var(--text-secondary)' : '#0a0a0a';
+    priv.style.fontWeight = isPublic ? '400' : '500';
+    pub.style.background = isPublic ? 'var(--accent-brand)' : 'var(--bg-alt)';
+    pub.style.color = isPublic ? '#0a0a0a' : 'var(--text-secondary)';
+    pub.style.fontWeight = isPublic ? '500' : '400';
+    if (hint) hint.textContent = isPublic
+      ? 'Anyone can discover and join. End-to-end encrypted.'
+      : 'Invite only. Your agents auto-join. End-to-end encrypted.';
+  };
+
+  // Enter key to create
+  document.getElementById('create-ch-name').onkeydown = function(e) {
+    if (e.key === 'Enter') window.doCreateChannel();
+  };
+};
+
+window.doCreateChannel = function() {
+  var nameInput = document.getElementById('create-ch-name');
+  var name = nameInput ? nameInput.value.trim().toLowerCase().replace(/\s+/g, '-') : '';
+  if (!name) { nameInput.style.outline = '2px solid #ff4444'; return; }
+  var descInput = document.getElementById('create-ch-desc');
+  var desc = descInput ? descInput.value.trim() : '';
+  var pubEl = document.getElementById('create-ch-public');
+  var isPublic = pubEl ? pubEl.value === '1' : false;
+
+  // Generate random key
+  var keyArr = new Uint8Array(32);
+  crypto.getRandomValues(keyArr);
+  var key = btoa(String.fromCharCode.apply(null, keyArr));
+
+  function onCreated() {
+    CONFIG.channels.push({ channel: name, key: key });
+    activeChannel = name;
+    headerName.textContent = '#' + name;
+    headerDesc.textContent = '';
+    document.title = 'AgentChannel';
+    var overlay = document.querySelector('div[style*=fixed]');
+    if (overlay) overlay.remove();
+    renderSidebar();
+    render();
+  }
+
+  if (isTauri && window.__TAURI__) {
+    // Tauri mode: invoke backend to save config
+    window.__TAURI__.core.invoke('create_channel', { channel: name, key: key }).then(onCreated).catch(function() {
+      // Fallback: just add to local config
+      onCreated();
+    });
+  } else {
+    // Web mode: call API
+    fetch('/api/create-channel', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ channel: name, key: key, public: isPublic, desc: desc })
+    }).then(function(r) { return r.json(); }).then(function(data) {
+      if (data.ok) onCreated();
+    }).catch(function() {
+      // Fallback: just add to local config anyway
+      onCreated();
+    });
+  }
+};
+
 // ---------------------------------------------------------------------------
 // Channel actions
 // ---------------------------------------------------------------------------
@@ -465,15 +698,20 @@ window.shareChannel = function() {
 
 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";
+  var leaving = activeChannel;
+  CONFIG.channels = CONFIG.channels.filter(function(c) { return c.channel !== leaving; });
+  // Persist via API
+  fetch('/api/leave-channel', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ channel: leaving })
+  }).catch(function() {});
+  activeChannel = CONFIG.channels.length ? CONFIG.channels[0].channel : "";
+  headerName.textContent = activeChannel ? "#" + activeChannel : "";
+  headerDesc.textContent = "";
   renderSidebar();
   render();
   if (window.renderMembers) window.renderMembers();
-  alert('Left channel. Run "agentchannel leave --channel <name>" in CLI to persist.');
 };
 
 window.copyCode = function(btn) {
@@ -495,6 +733,16 @@ window.copyMsg = function(btn) {
 // Init
 // ---------------------------------------------------------------------------
 async function init() {
+  // In Tauri mode, load config + identity from backend
+  if (isTauri) {
+    CONFIG = await API.invoke('get_config');
+    var ident = await API.invoke('get_identity');
+    if (ident) {
+      CONFIG.fingerprint = ident.fingerprint;
+    }
+    try { CONFIG.version = await API.invoke('get_version'); } catch(e) {}
+  }
+
   renderSidebar();
 
   window.acChannels = window.acChannels || {};
@@ -507,6 +755,7 @@ async function init() {
       channels[id] = {
         key: await deriveSubKeyWeb(ch.key, ch.subchannel),
         hash: await hashSubWeb(ch.key, ch.subchannel),
+        channelHash: ch.channelHash || await hashSubWeb(ch.key, ch.subchannel),
         name: ch.channel,
         sub: ch.subchannel
       };
@@ -514,6 +763,7 @@ async function init() {
       channels[id] = {
         key: await deriveKey(ch.key),
         hash: await hashRoom(ch.key),
+        channelHash: ch.channelHash || await hashRoom(ch.key),
         name: ch.channel
       };
     }
@@ -523,8 +773,8 @@ async function init() {
   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(); })
+    return fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + ch.channelHash + "&since=0&limit=30")
+      .then(function(r) { return r.json(); }).catch(function() { return []; })
       .then(async function(rows) {
         for (var ri = 0; ri < rows.length; ri++) {
           try {
@@ -562,11 +812,12 @@ async function init() {
     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});
+    var subChannelHash = subHash; // At epoch 0, MQTT hash = storage hash
+    channels[subId] = {key: subKey, hash: subHash, channelHash: subChannelHash, name: ps.name, sub: ps.sub};
+    CONFIG.channels.push({channel: ps.name, subchannel: ps.sub, key: ps.key, channelHash: subChannelHash});
     // Load subchannel history
     try {
-      var sres = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + subHash + "&since=0&limit=30");
+      var sres = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + subChannelHash + "&since=0&limit=30");
       var srows = await sres.json();
       for (var sri = 0; sri < srows.length; sri++) {
         try {
@@ -593,8 +844,66 @@ async function init() {
   if (userNameEl) {
     userNameEl.textContent = "@" + CONFIG.name + (CONFIG.fingerprint ? " (" + CONFIG.fingerprint.slice(0, 4) + ")" : "");
   }
+  var progressEl = document.getElementById("user-progress");
+  if (progressEl) progressEl.classList.add("connected");
+  var userInitialEl = document.getElementById("user-initial");
+  if (userInitialEl && CONFIG.name) {
+    userInitialEl.textContent = CONFIG.name.charAt(0).toUpperCase();
+  }
+
+  // In Tauri mode: listen for messages from Rust MQTT backend
+  if (isTauri) {
+    window.__TAURI__.event.listen("new_message", function(event) {
+      var msg = event.payload;
+      if (!msg || !msg.channel) return;
+
+      // Deduplicate
+      if (allMessages.some(function(m) { return m.id === msg.id; })) return;
+
+      allMessages.push(msg);
+
+      var chKeyName = msg.subchannel ? msg.channel + '/' + msg.subchannel : msg.channel;
+      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 = msg.subchannel ? "#" + msg.channel + "/" + msg.subchannel : "#" + msg.channel;
+        if (Notification.permission === "granted" && (document.hidden || activeChannel !== chKeyName)) {
+          var n = new Notification(nlabel + " @" + msg.sender, {body: msg.subject || msg.content.slice(0, 100)});
+          n.onclick = function() { window.focus(); };
+        }
+      }
+      render();
+      renderMembers();
+    });
+
+    // Listen for auto-updater events from Rust backend
+    window.__TAURI__.event.listen("update_available", function(event) {
+      var version = event.payload;
+      var banner = document.getElementById("update-banner");
+      if (!banner) return;
+      banner.innerHTML = '<div style="text-align:center;padding:16px 24px">' +
+        '<div style="font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:8px">v' + version + ' available</div>' +
+        '<button id="relaunch-btn" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer;font-size:0.85rem">Relaunch</button>' +
+        '</div>';
+      banner.style.display = "block";
+      document.getElementById("relaunch-btn").onclick = function() {
+        this.textContent = "Updating...";
+        this.disabled = true;
+        window.__TAURI__.core.invoke("install_update").catch(function(e) {
+          banner.innerHTML = '<div style="text-align:center;padding:12px;font-size:0.75rem;color:var(--text-muted)">Update failed: ' + e + '</div>';
+        });
+      };
+    });
+  }
 
-  // Connect to MQTT for real-time messages
+  // Connect to MQTT for real-time messages (web mode, also Tauri fallback)
   var client = mqtt.connect("wss://broker.emqx.io:8084/mqtt");
 
   client.on("connect", function() {
@@ -605,31 +914,35 @@ async function init() {
       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.innerHTML = '<div style="text-align:center;padding:16px 24px">' +
-            '<div style="font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:4px">Updated to ' + d.version + '</div>' +
-            '<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:12px">Relaunch to apply</div>' +
-            '<button onclick="navigator.clipboard.writeText(\'npm install -g agentchannel\');this.textContent=\'Copied! Run in terminal.\'" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer;font-size:0.85rem">Relaunch</button>' +
-            '</div>';
-          banner.style.display = "block";
+    // Check for updates — show banner (skip in Tauri mode, it has its own updater)
+    if (!isTauri) {
+      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.innerHTML = '<div style="text-align:center;padding:16px 24px">' +
+              '<div style="font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:4px">Updated to ' + d.version + '</div>' +
+              '<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:12px">Relaunch to apply</div>' +
+              '<button onclick="navigator.clipboard.writeText(\'npm install -g agentchannel\');this.textContent=\'Copied! Run in terminal.\'" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer;font-size:0.85rem">Relaunch</button>' +
+              '</div>';
+            banner.style.display = "block";
+          }
         }
-      }
-    }).catch(function() {});
+      }).catch(function() {});
+    }
   });
 
   client.on("close", function() {
     var userBar2 = document.getElementById("user-info");
     if (userBar2) userBar2.classList.remove("connected");
-    statusEl.className = "sidebar__status";
+    var statusEl = document.querySelector(".sidebar__status");
+    if (statusEl) statusEl.className = "sidebar__status";
   });
 
-  if (Notification.permission === "default") Notification.requestPermission();
+  // Request notification permission (web mode only — Tauri uses native notifications from Rust)
+  if (!isTauri && Notification.permission === "default") Notification.requestPermission();
 
   window.cloudMembers = window.cloudMembers || {};
   var cloudMembers = window.cloudMembers;
@@ -638,7 +951,7 @@ async function init() {
     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 res = await fetch("https://api.agentchannel.workers.dev/members?channel_hash=" + ch.channelHash);
         var rows = await res.json();
         var cid = ch.sub ? ch.name + '/' + ch.sub : ch.name;
         cloudMembers[cid] = rows;
@@ -672,13 +985,17 @@ async function init() {
     // Hide members for @me and public channels (AgentChannel)
     var isPublic = channelMetas[activeChannel] && channelMetas[activeChannel].public;
     var isOfficialPublic = activeChannel.toLowerCase() === "agentchannel";
-    if (activeChannel === "all" || activeChannel === "@me" || isPublic || isOfficialPublic) {
+    var isDm = activeChannel && activeChannel.indexOf("dm:") === 0;
+    var membersBtn = document.getElementById("toggle-members-btn");
+    if (activeChannel === "all" || activeChannel === "@me" || isDm) {
       if (header) header.textContent = "MEMBERS";
       list.innerHTML = "";
       panel.style.display = "none";
+      if (membersBtn) membersBtn.style.display = "none";
       return;
     }
     panel.style.display = "";
+    if (membersBtn) membersBtn.style.display = "";
 
     var memberMap = {};
     var online = new Set();
@@ -769,19 +1086,28 @@ async function init() {
         ? '<span style="color:var(--text-muted);font-size:0.6rem;margin-left:2px">(' + fp.slice(0, 4) + ')</span>'
         : '';
       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>';
+      return '<div class="members__item"' + dmClick + '><span class="members__dot" style="background:' + (isOnline ? "#00c858" : "#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>';
+    // Update members badge count (hidden when panel is open)
+    var badge = document.getElementById("members-badge");
+    if (badge) {
+      var count = memberCount;
+      badge.textContent = count > 99 ? "99+" : count > 0 ? count : "";
+      var panelCollapsed = document.getElementById("members-panel").classList.contains("collapsed") || document.getElementById("members-panel").style.display === "none";
+      badge.classList.toggle("hidden", !panelCollapsed);
+    }
+
+    // Update header actions (share/leave in title bar)
+    var headerActions = document.getElementById("header-actions");
+    if (headerActions) {
+      if (activeChannel !== "all" && activeChannel !== "@me" && !isDm) {
+        headerActions.innerHTML = '<button class="collapse-btn" onclick="window.shareChannel()" title="Share channel"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button>'
+          + '<button class="collapse-btn" onclick="window.leaveChannel()" title="Leave channel"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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></button>';
       } else {
-        actions.innerHTML = "";
+        headerActions.innerHTML = "";
       }
     }
   }
@@ -827,13 +1153,14 @@ async function init() {
                     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});
+                      var subChHash = subHash; // epoch 0: MQTT hash = storage hash
+                      channels[subId] = {key: subKey, hash: subHash, channelHash: subChHash, name: ch.name, sub: subName};
+                      CONFIG.channels.push({channel: ch.name, subchannel: subName, key: parentCfg.key, channelHash: subChHash});
                       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 hres = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + subChHash + "&since=0&limit=30");
                         var hrows = await hres.json();
                         for (var hi = 0; hi < hrows.length; hi++) {
                           try {
@@ -869,8 +1196,8 @@ 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.isDm ? "DM" : (ch.sub ? "#" + ch.name + " ##" + ch.sub : "#" + ch.name);
-            if (Notification.permission === "granted" && (document.hidden || activeChannel !== chKeyName)) {
+            var nlabel = ch.isDm ? "DM" : (ch.sub ? "#" + ch.name + "/" + ch.sub : "#" + ch.name);
+            if (!isTauri && Notification.permission === "granted" && (document.hidden || activeChannel !== chKeyName)) {
               var n = new Notification(nlabel + " @" + msg.sender, {body: msg.content});
               n.onclick = function() {
                 window.focus();
@@ -911,9 +1238,9 @@ async function init() {
     var cid = parent.channel + "/" + subName;
     activeChannel = cid;
     unreadCounts[cid] = 0;
-    headerName.textContent = "##" + subName;
+    headerName.textContent = "#" + activeChannel.split("/")[0] + "/" + subName;
     var subDesc2 = (channelMetas[parent.channel] && channelMetas[parent.channel].descriptions && channelMetas[parent.channel].descriptions[subName]) || "";
-    headerDesc.textContent = "#" + parent.channel + (subDesc2 ? " \u00B7 " + subDesc2 : "");
+    headerDesc.textContent = subDesc2;
     document.title = "AgentChannel";
     history.pushState(null, "", "/channel/" + encodeURIComponent(parent.channel) + "/sub/" + encodeURIComponent(subName));
     renderSidebar();
@@ -1026,33 +1353,161 @@ function toggleTheme() {
 }
 window.toggleTheme = toggleTheme;
 
-// Settings modal
+// Settings modal — tabbed layout
 function openSettings() {
   var fp = CONFIG.fingerprint || '';
   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%;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">' +
-    '<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:4px">Fingerprint</label>' +
-    '<div style="display:flex;gap:8px;align-items:center;margin-bottom:16px">' +
-    '<code style="flex:1;padding:8px 12px;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;font-size:0.8rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis">' + fp + '</code>' +
-    '<button onclick="navigator.clipboard.writeText(\'' + fp + '\');this.textContent=\'Copied!\';setTimeout(function(){this.textContent=\'Copy\'},1000)" style="padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-alt);color:var(--text);cursor:pointer;font-size:0.75rem;white-space:nowrap">Copy</button>' +
+
+  var sub = 'font-size:0.7rem;color:var(--text-secondary);margin-top:6px;line-height:1.5';
+  var row = 'display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)';
+  var rowLast = 'display:flex;align-items:center;justify-content:space-between;padding:10px 0';
+  var rl = 'font-size:0.82rem;color:var(--text)';
+  var pathStyle = 'flex:1;font-size:0.78rem;color:var(--text-body);padding:8px 12px;background:var(--bg-alt);border-radius:6px;border:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+  var folderIcon = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:block"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+  var folderBtn = 'display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:6px;background:var(--bg-alt);color:var(--text-secondary);cursor:pointer;flex-shrink:0';
+  // Switch toggle registry — handlers bound after tab render
+  var switchDefs = {};
+  function sw(id, checked, handler, onLabel, offLabel) {
+    var on = onLabel || 'On';
+    var off = offLabel || 'Off';
+    switchDefs[id] = { handler: handler, on: on, off: off };
+    var stateText = '<span id="' + id + '-label" style="font-size:0.7rem;color:var(--text-secondary);margin-right:6px">' + (checked ? on : off) + '</span>';
+    return '<div style="display:flex;align-items:center">' + stateText +
+      '<label class="switch"><input type="checkbox" id="' + id + '"' + (checked ? ' checked' : '') +
+      '><span class="slider"></span></label></div>';
+  }
+  function bindSwitches() {
+    for (var sid in switchDefs) {
+      var el = document.getElementById(sid);
+      if (!el || el._bound) continue;
+      el._bound = true;
+      (function(def, input) {
+        input.addEventListener('change', function() {
+          def.handler(input.checked);
+          var lbl = document.getElementById(input.id + '-label');
+          if (lbl) lbl.textContent = input.checked ? def.on : def.off;
+        });
+      })(switchDefs[sid], el);
+    }
+  }
+
+  // Tab content definitions
+  var tabs = {
+    Profile:
+      '<div style="margin-bottom:18px">' +
+      '<div style="font-size:0.7rem;color:var(--text-secondary);margin-bottom:5px">Display Name</div>' +
+      '<input id="settings-name" value="' + (CONFIG.name || '') + '" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;font-size:0.88rem;background:var(--bg-alt);color:var(--text);outline:none">' +
+      '</div>' +
+      '<div>' +
+      '<div style="font-size:0.7rem;color:var(--text-secondary);margin-bottom:5px">Fingerprint</div>' +
+      '<div style="display:flex;gap:8px;align-items:center">' +
+      '<code style="flex:1;padding:8px 10px;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;font-size:0.82rem;color:var(--text);overflow:hidden;text-overflow:ellipsis">' + fp + '</code>' +
+      '<button onclick="navigator.clipboard.writeText(\'' + fp + '\');this.textContent=\'Copied!\';setTimeout(function(){this.textContent=\'Copy\'},1000)" style="padding:6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-alt);color:var(--text);cursor:pointer;font-size:0.75rem;white-space:nowrap">Copy</button>' +
+      '</div>' +
+      '<div style="' + sub + '">Share this so others can reach you directly</div>' +
+      '</div>',
+
+    Sync:
+      '<div style="' + row + '">' +
+      '<span style="' + rl + '">Private channels</span>' +
+      sw('settings-sync-private', CONFIG.syncPrivate !== false, window.toggleSyncPrivate, 'Sync on', 'Sync off') +
+      '</div>' +
+      '<div style="' + rowLast + '">' +
+      '<span style="' + rl + '">Public channels</span>' +
+      sw('settings-sync-public', !!CONFIG.syncPublic, window.toggleSyncPublic, 'Sync on', 'Sync off') +
+      '</div>' +
+      '<div style="font-size:0.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-top:14px;margin-bottom:5px">Sync folder</div>' +
+      '<div style="display:flex;gap:6px;align-items:center">' +
+      '<div style="' + pathStyle + '">~/agentchannel/messages/</div>' +
+      '<button onclick="window.openSyncFolder(event)" style="' + folderBtn + '" title="Open folder">' + folderIcon + '</button>' +
+      '</div>' +
+      '<div style="' + sub + '">Toggle per-channel in the sidebar.</div>',
+
+    Brain:
+      '<div style="' + rowLast + '">' +
+      '<span style="' + rl + '">Brain</span>' +
+      sw('settings-distill', CONFIG.distill !== false, window.toggleDistill, 'Learning', 'Paused') +
+      '</div>' +
+      '<div style="font-size:0.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-top:14px;margin-bottom:5px">Brain folder</div>' +
+      '<div style="display:flex;gap:6px;align-items:center">' +
+      '<div id="brain-path" style="' + pathStyle + '">~/agentchannel/brain/</div>' +
+      '<button onclick="window.openBrainFolder(event)" style="' + folderBtn + '" title="Open folder">' + folderIcon + '</button>' +
+      '</div>' +
+      '<div id="brain-activity" style="margin-top:12px;padding:12px;background:var(--bg-alt);border-radius:6px;border:1px solid var(--border);font-size:0.75rem;color:var(--text-body);line-height:1.6">' +
+      '<div style="color:var(--text-secondary);font-size:0.65rem;margin-bottom:8px">ACTIVITY</div>' +
+      '<div id="brain-graph" style="display:flex;gap:2px;flex-wrap:wrap;margin-bottom:8px"></div>' +
+      '<div id="brain-stats">Preparing...</div>' +
+      '</div>',
+
+    Security:
+      '<div style="' + row + '">' +
+      '<span style="' + rl + '">End-to-end encryption</span>' +
+      '<span style="font-size:0.72rem;color:var(--accent-brand)">Active</span>' +
+      '</div>' +
+      '<div style="' + row + '">' +
+      '<span style="' + rl + '">Message signing</span>' +
+      '<span style="font-size:0.72rem;color:var(--accent-brand)">Active</span>' +
+      '</div>' +
+      '<div style="' + rowLast + '">' +
+      '<span style="' + rl + '">Private key</span>' +
+      '<span style="font-size:0.72rem;color:var(--text-secondary)">Local only</span>' +
+      '</div>' +
+      '<div style="' + sub + '">No one — not even the server — can read your messages. Every message is signed so you know who sent it.</div>'
+  };
+
+  var tabNames = ['Profile', 'Sync', 'Brain', 'Security'];
+  var tabBtnStyle = 'padding:6px 14px 8px;border:none;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;font-size:0.78rem;transition:all 0.1s;background:transparent';
+  var tabBtnActive = 'color:var(--text);border-bottom-color:var(--accent-brand)';
+  var tabBtnInactive = 'color:var(--text-secondary);border-bottom-color:transparent';
+
+  overlay.innerHTML = '<div style="background:var(--bg);border:1px solid var(--border);border-radius:12px;width:440px;max-width:92%;box-shadow:0 8px 32px rgba(0,0,0,0.5);overflow:hidden">' +
+    // Header
+    '<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0">' +
+    '<h3 style="font-size:1rem;color:var(--text);margin:0">Settings</h3>' +
+    '<button onclick="this.closest(\'div[style*=fixed]\').remove()" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.1rem;padding:4px;line-height:1">&times;</button>' +
     '</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>' +
+    // Tabs
+    '<div id="settings-tabs" style="display:flex;gap:4px;padding:12px 20px 0">' +
+    tabNames.map(function(name, i) {
+      return '<button class="settings-tab" data-tab="' + name + '" style="' + tabBtnStyle + ';' + (i === 0 ? tabBtnActive : tabBtnInactive) + '">' + name + '</button>';
+    }).join('') +
+    '</div>' +
+    // Content
+    '<div id="settings-content" style="padding:16px 20px 20px;height:220px;overflow-y:auto">' + tabs.Profile + '</div>' +
+    // Footer
+    '<div style="border-top:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between">' +
+    '<span style="font-size:0.72rem;color:var(--text-secondary)">v' + (CONFIG.version || '?') + '</span>' +
+    '<div style="display:flex;gap:8px">' +
+    '<button onclick="this.closest(\'div[style*=fixed]\').remove()" style="padding:7px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-alt);color:var(--text);cursor:pointer;font-size:0.78rem">Cancel</button>' +
+    '<button onclick="saveName()" style="padding:7px 14px;border:none;border-radius:6px;background:var(--text);color:var(--bg);cursor:pointer;font-size:0.78rem;font-weight:600">Save</button>' +
     '</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:#1a1a1a;color:#fff;cursor:pointer;font-size:0.8rem;font-weight:600">Save</button>' +
     '</div></div>';
+
   document.body.appendChild(overlay);
+  bindSwitches();
+
+  // Tab switching
+  var tabButtons = overlay.querySelectorAll('.settings-tab');
+  var contentEl = overlay.querySelector('#settings-content');
+  for (var ti = 0; ti < tabButtons.length; ti++) {
+    tabButtons[ti].onclick = function(e) {
+      e.stopPropagation();
+      var name = this.getAttribute('data-tab');
+      contentEl.innerHTML = tabs[name];
+      bindSwitches();
+      for (var j = 0; j < tabButtons.length; j++) {
+        tabButtons[j].style.color = 'var(--text-secondary)';
+        tabButtons[j].style.borderBottomColor = 'transparent';
+      }
+      this.style.color = 'var(--text)';
+      this.style.borderBottomColor = 'var(--accent-brand)';
+      if (name === 'Brain' && window.loadDistillStatus) window.loadDistillStatus();
+    };
+  }
+
+  if (window.loadDistillStatus) window.loadDistillStatus();
 }
 window.openSettings = openSettings;
 
@@ -1073,6 +1528,8 @@ function saveName() {
     CONFIG.name = newName;
     var userNameEl = document.getElementById('user-name');
     if (userNameEl) userNameEl.textContent = '@' + newName + (CONFIG.fingerprint ? ' (' + CONFIG.fingerprint.slice(0, 4) + ')' : '');
+    var initEl = document.getElementById('user-initial');
+    if (initEl) initEl.textContent = newName.charAt(0).toUpperCase();
     document.querySelector('div[style*=fixed]').remove();
   }).catch(function() {
     alert('Failed to save name');
@@ -1080,11 +1537,182 @@ function saveName() {
 }
 window.saveName = saveName;
 
+// ── Distill toggle ───────────────────────────────────────
+
+// ── Sync toggle (click handler on sidebar icons) ─────────
+
+document.addEventListener('click', function(e) {
+  var toggle = e.target.closest('.sync-toggle');
+  if (!toggle) return;
+  e.stopPropagation();
+  var channel = toggle.getAttribute('data-channel');
+  var wasSynced = toggle.getAttribute('data-synced') === '1';
+  var nowSynced = !wasSynced;
+  fetch('/api/sync', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ channel: channel, enabled: nowSynced })
+  }).then(function() {
+    // Update local config
+    for (var i = 0; i < CONFIG.channels.length; i++) {
+      if (CONFIG.channels[i].channel === channel && !CONFIG.channels[i].subchannel) {
+        CONFIG.channels[i].sync = nowSynced;
+      }
+    }
+    renderSidebar();
+  });
+});
+
+window.toggleDistill = function(enabled) {
+  fetch('/api/distill', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ enabled: enabled })
+  });
+};
+
+window.toggleSyncPrivate = function(enabled) {
+  CONFIG.syncPrivate = enabled;
+  for (var i = 0; i < CONFIG.channels.length; i++) {
+    var ch = CONFIG.channels[i];
+    if (ch.channel.toLowerCase() !== 'agentchannel' && !ch.subchannel) {
+      fetch('/api/sync', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channel: ch.channel, enabled: enabled })
+      });
+    }
+  }
+  renderSidebar();
+};
+
+window.toggleSyncPublic = function(enabled) {
+  // Toggle sync default for all public channels
+  CONFIG.syncPublic = enabled;
+  var official = 'agentchannel';
+  for (var i = 0; i < CONFIG.channels.length; i++) {
+    var ch = CONFIG.channels[i];
+    if (ch.channel.toLowerCase() === official && !ch.subchannel) {
+      fetch('/api/sync', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channel: ch.channel, enabled: enabled })
+      });
+    }
+  }
+  renderSidebar();
+};
+
+function openFolder(path, btnEvent) {
+  var btn = btnEvent && btnEvent.target ? btnEvent.target.closest('button') : null;
+  if (window.__TAURI__) {
+    window.__TAURI__.shell.open(path);
+  } else {
+    navigator.clipboard.writeText(path);
+    if (btn) {
+      var orig = btn.innerHTML;
+      btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent-brand)" stroke-width="2.5" style="display:block"><polyline points="20 6 9 17 4 12"/></svg>';
+      setTimeout(function() { btn.innerHTML = orig; }, 1200);
+    }
+  }
+}
+
+window.openSyncFolder = function(e) {
+  openFolder(CONFIG.syncPath || (window.HOME || '') + '/agentchannel/messages', e || window.event);
+};
+
+window.openBrainFolder = function(e) {
+  openFolder(CONFIG.brainPath || (window.HOME || '') + '/agentchannel/brain', e || window.event);
+};
+
+// Load distill status into settings
+window.loadDistillStatus = function() {
+  fetch('/api/distill-status').then(function(r) { return r.json(); }).then(function(status) {
+    var el = document.getElementById('brain-path');
+    if (el) {
+      el.textContent = status.brainDir || '~/agentchannel/brain/';
+    }
+
+    // Render contribution graph
+    var graphEl = document.getElementById('brain-graph');
+    if (graphEl) {
+      var days = 30;
+      var html = '';
+      var tc = status.topicCount || 0;
+      // Generate mock activity data based on topic count
+      // In production this would come from distill/log.jsonl
+      for (var di = 0; di < days; di++) {
+        var age = days - 1 - di;
+        var level = 0;
+        if (tc > 0) {
+          // Simulate: recent days more active, older days less
+          var rand = Math.sin(di * 7.3 + tc) * 0.5 + 0.5;
+          if (age < 3) level = rand > 0.2 ? (rand > 0.6 ? 3 : 2) : 1;
+          else if (age < 10) level = rand > 0.4 ? (rand > 0.7 ? 2 : 1) : 0;
+          else level = rand > 0.6 ? 1 : 0;
+        }
+        var colors = [
+          'var(--border)',
+          'rgba(0,200,88,0.2)',
+          'rgba(0,200,88,0.45)',
+          'rgba(0,200,88,0.75)'
+        ];
+        html += '<div style="width:10px;height:10px;border-radius:2px;background:' + colors[level] + '" title="' + age + 'd ago"></div>';
+      }
+      graphEl.innerHTML = html;
+    }
+
+    // Render stats text
+    var statsEl = document.getElementById('brain-stats');
+    if (statsEl) {
+      var tc = status.topicCount || 0;
+      var chList = status.channelsProcessed || [];
+      var lastRun = status.lastRun ? timeAgo(status.lastRun) : null;
+
+      if (tc === 0 && !lastRun) {
+        statsEl.innerHTML = '<span style="color:var(--text-secondary)">Waiting for first messages...</span>';
+      } else {
+        var topicLabel = tc === 1 ? '1 topic' : tc + ' topics';
+        var chLabel = chList.length === 1 ? '1 channel' : chList.length + ' channels';
+        var parts = '<span style="color:var(--text);font-weight:600">' + topicLabel + '</span> from ' + chLabel;
+        if (lastRun) parts += ' · ' + lastRun;
+        statsEl.innerHTML = parts;
+      }
+    }
+  }).catch(function() {});
+};
+
+function timeAgo(ts) {
+  var diff = Math.floor((Date.now() - ts) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return Math.floor(diff / 60) + 'min ago';
+  if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+  return Math.floor(diff / 86400) + 'd ago';
+}
+
 // ── Input: send message + @autocomplete ──────────────────
 
 function sendMsg() {
   var input = document.getElementById('msg-input');
   if (!input || !input.value.trim() || activeChannel === '@me') return;
+  // Announcement channels: only owners can send
+  var chName = activeChannel.split('/')[0];
+  var meta = channelMetas[chName];
+  if (meta && meta.mode === 'announcement' && (!CONFIG.fingerprint || meta.owners.indexOf(CONFIG.fingerprint) === -1)) {
+    return;
+  }
+  // DM mode: use sendDmMessage
+  if (activeChannel && activeChannel.indexOf('dm:') === 0) {
+    var theirFp = null;
+    for (var fp in dmChannels) {
+      if (dmChannels[fp].channelId === activeChannel) { theirFp = fp; break; }
+    }
+    if (theirFp && window.sendDmMessage) {
+      window.sendDmMessage(theirFp, input.value.trim());
+      input.value = '';
+    }
+    return;
+  }
   fetch('/api/send', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -1143,3 +1771,4 @@ var themeBtn = document.getElementById('theme-toggle');
 if (themeBtn) themeBtn.innerHTML = savedTheme === 'dark' ? sunIcon : moonIcon;
 
 init();
+