feat: Phase 12 — P2P crypto material, password split, node Ed25519 auth

Baseline commit capturing in-progress Phase 12 work that was already present
in the working tree (uncommitted) before the Phase 11.5 security remediation
begins. Committed as-is, without review or modification, so that remediation
changes arrive as a separable diff.

Contents: BundleStore (P2P GEK + keypair bundles), password split
(auth_key / bundle_key), node Ed25519 auth (POST /v1/nodes/auth, node-scoped
JWT), GEK-HMAC handshake proof with DTLS channel binding, Ed25519 admin
challenge-response, node local admin UI rewrite, browser key persistence.

Not authored in this session — captured to establish a baseline.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

1 files changed, 420 insertions, 129 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index d8f9df5..ddff928 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -66,6 +66,58 @@ async function getAllCachedIndexes() {
 // ── Auth persistence ─────────────────────────────────────────────────────────
 
 let _sessionKeys = null;
+let _bundleKey = null;
+let _pendingBundlePush = null;
+
+function _openKeyDB() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open('meshbay_keys', 1);
+    req.onupgradeneeded = () => req.result.createObjectStore('k');
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+async function _storeBundleKey(key) {
+  try {
+    const db = await _openKeyDB();
+    const tx = db.transaction('k', 'readwrite');
+    tx.objectStore('k').put(key, 'bk');
+    await new Promise(r => { tx.oncomplete = r; });
+    db.close();
+  } catch {}
+}
+async function _loadBundleKey() {
+  try {
+    const db = await _openKeyDB();
+    const tx = db.transaction('k', 'readonly');
+    const g = tx.objectStore('k').get('bk');
+    const val = await new Promise(r => { g.onsuccess = () => r(g.result); });
+    db.close();
+    return val || null;
+  } catch { return null; }
+}
+async function _clearKeyDB() {
+  try {
+    const db = await _openKeyDB();
+    const tx = db.transaction('k', 'readwrite');
+    tx.objectStore('k').clear();
+    await new Promise(r => { tx.oncomplete = r; });
+    db.close();
+  } catch {}
+}
+function _saveSessionKeys() {
+  try {
+    if (_sessionKeys) sessionStorage.setItem('meshbay_sk', JSON.stringify(_sessionKeys));
+  } catch {}
+}
+function _restoreSessionKeys() {
+  try {
+    if (!_sessionKeys) {
+      const sk = sessionStorage.getItem('meshbay_sk');
+      if (sk) _sessionKeys = JSON.parse(sk);
+    }
+  } catch {}
+}
 
 function loadAuth() {
   try {
@@ -81,6 +133,10 @@ function saveAuth(auth) {
   } else {
     localStorage.removeItem(AUTH_KEY);
     _sessionKeys = null;
+    _bundleKey = null;
+    _pendingBundlePush = null;
+    _clearKeyDB();
+    try { sessionStorage.removeItem('meshbay_sk'); } catch {}
   }
 }
 
@@ -139,9 +195,74 @@ function navigate(path) {
 const AuthContext = createContext(null);
 function useAuth() { return useContext(AuthContext); }
 
+// ── User Menu ────────────────────────────────────────────────────────────────
+
+function UserMenu({ user, theme, onThemeChange, onLogout }) {
+  const [open, setOpen] = useState(false);
+  const [langOpen, setLangOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('click', close);
+    return () => document.removeEventListener('click', close);
+  }, [open]);
+
+  const resolved = resolveTheme(theme);
+
+  return html`
+    <div class="user-menu-wrap" ref=${ref}>
+      <button class="user-menu-trigger" onClick=${() => setOpen(o => !o)}>
+        <span class="user-menu-avatar">${user.username[0].toUpperCase()}</span>
+        <span class="user-menu-name">${user.username}</span>
+        <span class="user-menu-caret">${open ? '▴' : '▾'}</span>
+      </button>
+      ${open && html`
+        <div class="user-menu-dropdown">
+          <div class="user-menu-header">
+            <span class="user-menu-avatar lg">${user.username[0].toUpperCase()}</span>
+            <div>
+              <div class="user-menu-uname">${user.username}</div>
+              <div class="user-menu-role">${user.role || 'user'}</div>
+            </div>
+          </div>
+          <div class="user-menu-divider"></div>
+          <button class="user-menu-item" onClick=${(e) => { e.stopPropagation(); setLangOpen(o => !o); }}>
+            <span class="umi-icon">${'\u{1F310}'}</span> ${t('usermenu.language')}
+            <span class="umi-arrow">${langOpen ? '▴' : '▾'}</span>
+          </button>
+          ${langOpen && LOCALES.map(l => html`
+            <button key=${l.code} class="user-menu-item user-menu-sub"
+              onClick=${() => { setLocale(l.code); window.location.reload(); }}>
+              <span class="umi-icon">${l.flag}</span> ${l.name}
+              ${getLocale() === l.code && html`<span class="umi-check">${'✓'}</span>`}
+            </button>
+          `)}
+          <button class="user-menu-item" onClick=${() => { setOpen(false); navigate('/settings'); }}>
+            <span class="umi-icon">${'⚙'}</span> ${t('usermenu.settings')}
+          </button>
+          <button class="user-menu-item" onClick=${() => {
+            onThemeChange(resolved === 'dark' ? 'light' : 'dark');
+          }}>
+            <span class="umi-icon">${resolved === 'dark' ? '☀' : '☾'}</span>
+            ${' '}${resolved === 'dark' ? t('usermenu.theme_light') : t('usermenu.theme_dark')}
+          </button>
+          <div class="user-menu-divider"></div>
+          <button class="user-menu-item user-menu-logout" onClick=${onLogout}>
+            <span class="umi-icon">${'⏻'}</span> ${t('usermenu.logout')}
+          </button>
+        </div>
+      `}
+    </div>
+  `;
+}
+
 // ── Nav ──────────────────────────────────────────────────────────────────────
 
-function Nav({ user, theme, onThemeToggle, onLogout, onMenuToggle, unreadCount }) {
+function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount }) {
   return html`
     <nav class="nav">
       <div class="nav-left">
@@ -157,13 +278,9 @@ function Nav({ user, theme, onThemeToggle, onLogout, onMenuToggle, unreadCount }
             ${'\u{1F514}'}${unreadCount > 0 && html`<span class="notif-badge">${unreadCount}</span>`}
           </a>
         `}
-        <button class="nav-theme" onClick=${onThemeToggle}
-          aria-label="${t('nav.toggle_menu')}" title=${theme === 'dark' ? t('nav.light_mode') : t('nav.dark_mode')}>
-          ${theme === 'dark' ? '☀' : '☾'}
-        </button>
         ${user ? html`
-          <span class="nav-user">${user.username}</span>
-          <button class="nav-btn" onClick=${onLogout}>${t('nav.logout')}</button>
+          <${UserMenu} user=${user} theme=${theme}
+            onThemeChange=${onThemeChange} onLogout=${onLogout} />
         ` : html`
           <a class="nav-btn" href="#/login">${t('nav.login')}</a>
         `}
@@ -178,6 +295,22 @@ function Sidebar({ groups, route, menuOpen, role }) {
   const isStaff = role === 'moderator' || role === 'admin';
   return html`
     <aside class="sidebar ${menuOpen ? 'open' : ''}">
+      ${isStaff && html`
+        <div class="sidebar-section">
+          <div class="sidebar-heading">${t('sidebar.admin')}</div>
+          <a class="sidebar-item ${route === '/admin' ? 'active' : ''}"
+             href="#/admin">${'\u{1F6E1}'} ${t('admin.title')}</a>
+        </div>
+      `}
+      <div class="sidebar-section">
+        <div class="sidebar-heading">${t('sidebar.discover')}</div>
+        <a class="sidebar-item ${route === '/explore' ? 'active' : ''}"
+           href="#/explore">${t('sidebar.public_groups')}</a>
+        <a class="sidebar-item ${route === '/search' ? 'active' : ''}"
+           href="#/search">${t('sidebar.search')}</a>
+        <a class="sidebar-item ${route === '/create-group' ? 'active' : ''}"
+           href="#/create-group">${t('sidebar.create_group')}</a>
+      </div>
       <div class="sidebar-section">
         <div class="sidebar-heading">${t('sidebar.my_groups')}</div>
         ${groups.length === 0
@@ -191,21 +324,6 @@ function Sidebar({ groups, route, menuOpen, role }) {
           `)
         }
       </div>
-      <div class="sidebar-section">
-        <div class="sidebar-heading">${t('sidebar.discover')}</div>
-        <a class="sidebar-item ${route === '/explore' ? 'active' : ''}"
-           href="#/explore">${t('sidebar.public_groups')}</a>
-        <a class="sidebar-item ${route === '/search' ? 'active' : ''}"
-           href="#/search">${t('sidebar.search')}</a>
-        <a class="sidebar-item ${route === '/create-group' ? 'active' : ''}"
-           href="#/create-group">${t('sidebar.create_group')}</a>
-        <a class="sidebar-item ${route === '/settings' ? 'active' : ''}"
-           href="#/settings">${t('sidebar.settings')}</a>
-        ${isStaff && html`
-          <a class="sidebar-item ${route === '/admin' ? 'active' : ''}"
-             href="#/admin">${t('sidebar.admin')}</a>
-        `}
-      </div>
     </aside>
   `;
 }
@@ -455,6 +573,7 @@ function ExplorePage({ token, myGroupIds }) {
                 <div key=${g.id} class="group-card">
                   <a href="#/group/${g.id}" style="text-decoration:none;color:inherit">
                     <h3>${g.name}</h3>
+                    ${g.description && html`<p class="group-card-desc">${g.description}</p>`}
                   </a>
                   <span class="badge">${g.join_policy}</span>
                   ${g.source && g.source !== 'local' && html`
@@ -484,6 +603,7 @@ function ExplorePage({ token, myGroupIds }) {
 
 function CreateGroupPage({ token, onCreated }) {
   const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
   const [visibility, setVisibility] = useState('private');
   const [joinPolicy, setJoinPolicy] = useState('invite');
   const [error, setError] = useState('');
@@ -495,26 +615,12 @@ function CreateGroupPage({ token, onCreated }) {
     setLoading(true);
     setError('');
     try {
+      const body = { name: name.trim(), visibility, join_policy: joinPolicy };
+      if (description.trim()) body.description = description.trim().slice(0, 512);
       const data = await hubFetch('/v1/groups', {
-        method: 'POST', token,
-        body: { name: name.trim(), visibility, join_policy: joinPolicy },
+        method: 'POST', token, body,
       });
 
-      if (window.MeshBayCrypto) {
-        try {
-          const gek = window.MeshBayCrypto.generateGEK();
-          const meResp = await hubFetch('/v1/users/me', { token });
-          const pubkeys = await hubFetch(`/v1/users/${meResp.username}/pubkeys`);
-          const pkXBytes = Uint8Array.from(atob(pubkeys.pk_x25519), c => c.charCodeAt(0));
-          const bundle = await window.MeshBayCrypto.wrapGEK(gek, pkXBytes);
-          await hubFetch(`/v1/groups/${data.group_id}/members/${meResp.username}/gek`, {
-            method: 'POST', token, body: bundle,
-          });
-        } catch (e) {
-          console.warn('GEK wrap skipped:', e);
-        }
-      }
-
       if (onCreated) onCreated();
       navigate('/');
     } catch (err) {
@@ -525,31 +631,70 @@ function CreateGroupPage({ token, onCreated }) {
   };
 
   return html`
-    <div class="page-center">
-      <h2>${t('create_group.title')}</h2>
-      <p class="page-message" style="max-width:380px;text-align:center;margin-bottom:12px">
-        ${t('create_group.hint')}
-      </p>
-      ${error && html`<p class="error-msg">${error}</p>`}
-      <form class="login-form" onSubmit=${onSubmit}>
-        <input type="text" placeholder="${t('create_group.name')}"
-          value=${name} onInput=${e => setName(e.target.value)} required />
-        <label class="settings-label">${t('create_group.visibility')}</label>
-        <select class="settings-select" value=${visibility}
-          onChange=${e => setVisibility(e.target.value)}>
-          <option value="private">${t('create_group.private')}</option>
-          <option value="public">${t('create_group.public')}</option>
-        </select>
-        <label class="settings-label">${t('create_group.join_policy')}</label>
-        <select class="settings-select" value=${joinPolicy}
-          onChange=${e => setJoinPolicy(e.target.value)}>
-          <option value="invite">${t('create_group.invite')}</option>
-          <option value="open">${t('create_group.open')}</option>
-        </select>
-        <button type="submit" disabled=${loading}>
-          ${loading ? t('create_group.creating') : t('create_group.submit')}
-        </button>
-      </form>
+    <div class="create-group-page">
+      <div class="create-group-card">
+        <div class="create-group-header">
+          <h2>${t('create_group.title')}</h2>
+          <p class="create-group-hint">${t('create_group.hint')}</p>
+        </div>
+        ${error && html`<div class="error-msg" style="margin-bottom:16px">${error}</div>`}
+        <form onSubmit=${onSubmit}>
+          <div class="form-field">
+            <label class="form-label">${t('create_group.name')}</label>
+            <input type="text" placeholder="e.g. Family Photos, Project Files..."
+              value=${name} onInput=${e => setName(e.target.value)} required autofocus />
+          </div>
+
+          <div class="form-field">
+            <label class="form-label">${t('create_group.description')}</label>
+            <textarea class="form-textarea" rows="3" maxlength="512"
+              placeholder="${t('create_group.description_hint')}"
+              value=${description}
+              onInput=${e => setDescription(e.target.value)} />
+            <div class="form-char-count">${description.length}/512</div>
+          </div>
+
+          <div class="form-field">
+            <label class="form-label">${t('create_group.visibility')}</label>
+            <div class="option-cards">
+              <button type="button" class="option-card ${visibility === 'private' ? 'selected' : ''}"
+                onClick=${() => setVisibility('private')}>
+                <span class="option-icon">🔒</span>
+                <span class="option-title">${t('create_group.private')}</span>
+                <span class="option-desc">Only invited members can see and access files</span>
+              </button>
+              <button type="button" class="option-card ${visibility === 'public' ? 'selected' : ''}"
+                onClick=${() => setVisibility('public')}>
+                <span class="option-icon">🌐</span>
+                <span class="option-title">${t('create_group.public')}</span>
+                <span class="option-desc">Anyone can discover and browse this group</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="form-field">
+            <label class="form-label">${t('create_group.join_policy')}</label>
+            <div class="option-cards">
+              <button type="button" class="option-card ${joinPolicy === 'invite' ? 'selected' : ''}"
+                onClick=${() => setJoinPolicy('invite')}>
+                <span class="option-icon">✉</span>
+                <span class="option-title">${t('create_group.invite')}</span>
+                <span class="option-desc">Members must be invited by an admin</span>
+              </button>
+              <button type="button" class="option-card ${joinPolicy === 'open' ? 'selected' : ''}"
+                onClick=${() => setJoinPolicy('open')}>
+                <span class="option-icon">🚪</span>
+                <span class="option-title">${t('create_group.open')}</span>
+                <span class="option-desc">Anyone can join without approval</span>
+              </button>
+            </div>
+          </div>
+
+          <button class="create-group-submit" type="submit" disabled=${loading}>
+            ${loading ? t('create_group.creating') : t('create_group.submit')}
+          </button>
+        </form>
+      </div>
     </div>
   `;
 }
@@ -617,7 +762,7 @@ async function pipelinedDownload(transport, gekKey, fileId, totalChunks, onChunk
   return results;
 }
 
-function GroupPage({ groupId, group, token, username }) {
+function GroupPage({ groupId, group, token, username, userId }) {
   const [status, setStatus] = useState('idle');
   const [entries, setEntries] = useState([]);
   const [cached, setCached] = useState(false);
@@ -632,10 +777,18 @@ function GroupPage({ groupId, group, token, username }) {
   const [tab, setTab] = useState('files');
   const [uploading, setUploading] = useState(false);
   const [menuOpen, setMenuOpen] = useState(null);
+  const [isNodeAdmin, setIsNodeAdmin] = useState(false);
   const transportRef = useRef(null);
   const gekRef = useRef(null);
 
   useEffect(() => {
+    if (menuOpen === null) return;
+    const close = () => setMenuOpen(null);
+    document.addEventListener('click', close);
+    return () => document.removeEventListener('click', close);
+  }, [menuOpen]);
+
+  useEffect(() => {
     let cancelled = false;
 
     getCachedGroupIndex(groupId).then(hit => {
@@ -649,6 +802,8 @@ function GroupPage({ groupId, group, token, username }) {
       setStatus('discovering');
       setError('');
       gekRef.current = null;
+      if (!_bundleKey) _bundleKey = await _loadBundleKey();
+      _restoreSessionKeys();
       try {
         const nodesData = await hubFetch(`/v1/groups/${groupId}/nodes`, { token });
         if (cancelled) return;
@@ -657,15 +812,65 @@ function GroupPage({ groupId, group, token, username }) {
           return;
         }
 
+        // Session keys for P2P GEK bundle fetch (node delivers wrapped GEK)
+        const sessionKeys = _sessionKeys ? {
+          skXB64: _sessionKeys.skXB64,
+          pkXB64: _sessionKeys.pkXB64,
+        } : null;
+
         setStatus('connecting');
         const nodeId = nodesData.nodes[0].node_id;
         const transport = new window.MeshBayTransport('', token);
         transportRef.current = transport;
 
-        await transport.connect(nodeId, token, groupId);
+        const ack = await transport.connect(
+          nodeId, token, groupId, null, sessionKeys, _bundleKey, username);
         if (cancelled) return;
+        setIsNodeAdmin(!!ack.is_node_admin);
+
+        // If transport recovered different session keys from node during handshake
+        if (transport.sessionKeys) {
+          const recovered = transport.sessionKeys;
+          if (!_sessionKeys || recovered.skXB64 !== _sessionKeys.skXB64) {
+            _sessionKeys = recovered;
+            if (!_sessionKeys.pkXB64) {
+              const pubkeys = await hubFetch(
+                `/v1/users/${username}/pubkeys`, { token });
+              _sessionKeys.pkXB64 = pubkeys.pk_x25519;
+            }
+            _pendingBundlePush = null;
+            try { localStorage.removeItem(`meshbay_kp_${username}`); } catch {}
+            _saveSessionKeys();
+          }
+        }
+
+        // Push keypair bundle to node (new registration, localStorage → node)
+        if (_pendingBundlePush && transport.connected) {
+          try {
+            await transport.storeKeypairBundle(_pendingBundlePush);
+            try { localStorage.removeItem(`meshbay_kp_${username}`); } catch {}
+            _pendingBundlePush = null;
+          } catch (e) {
+            console.warn('[MeshBay] Bundle push to node deferred:', e.message);
+          }
+        }
+
+        // Import GEK from transport (fetched from node during handshake)
+        if (transport.gekRaw && window.MeshBayCrypto) {
+          gekRef.current = await window.MeshBayCrypto.importGEK(
+            window.MeshBayCrypto.b64encode(transport.gekRaw));
+        }
+
         setStatus('fetching');
 
+        transport.onIndexSync = (msg) => {
+          if (cancelled) return;
+          const synced = msg.entries || [];
+          setEntries(synced);
+          setCached(false);
+          cacheGroupIndex(groupId, group ? group.name : groupId, synced);
+        };
+
         const indexMsg = await transport.fetchIndex();
         if (cancelled) return;
         const freshEntries = indexMsg.entries || [];
@@ -692,6 +897,7 @@ function GroupPage({ groupId, group, token, username }) {
     return () => {
       cancelled = true;
       if (transportRef.current) {
+        transportRef.current.onIndexSync = null;
         transportRef.current.close();
         transportRef.current = null;
       }
@@ -705,11 +911,6 @@ function GroupPage({ groupId, group, token, username }) {
     setDlState({ fileId: entry.id, name: entry.name, progress: 0, total: entry.size });
 
     try {
-      if (!gekRef.current && window.MeshBayCrypto) {
-        const gekB64 = await transport.fetchGEK();
-        gekRef.current = await window.MeshBayCrypto.importGEK(gekB64);
-      }
-
       const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
       let downloaded = 0;
       const onProgress = (bytes) => {
@@ -764,8 +965,9 @@ function GroupPage({ groupId, group, token, username }) {
         const buf = new Uint8Array(await slice.arrayBuffer());
         await transport.uploadChunk(file.name, i, totalChunks, buf);
       }
+      await new Promise(r => setTimeout(r, 2500));
       const indexMsg = await transport.fetchIndex();
-      setEntries(indexMsg.entries || []);
+      if (indexMsg.entries) setEntries(indexMsg.entries);
     } catch (err) {
       setError(err.message);
     } finally {
@@ -777,7 +979,10 @@ function GroupPage({ groupId, group, token, username }) {
     const transport = transportRef.current;
     if (!transport || !transport.connected) return;
     try {
-      await transport.deleteFile(entry.id);
+      const signFn = (_sessionKeys && window.MeshBayKeys)
+        ? (challenge) => window.MeshBayKeys.signChallenge(_sessionKeys.skEdB64, challenge)
+        : null;
+      await transport.deleteFile(entry.id, signFn);
       const indexMsg = await transport.fetchIndex();
       setEntries(indexMsg.entries || []);
     } catch (err) {
@@ -846,12 +1051,30 @@ function GroupPage({ groupId, group, token, username }) {
   return html`
     <div>
       <div class="group-header">
-        <h2>${group ? group.name : t('group.default_name')}</h2>
+        <div>
+          <h2 style="margin-bottom:${group && group.description ? '4px' : '0'}">
+            ${group ? group.name : t('group.default_name')}
+          </h2>
+          ${group && group.description && html`
+            <p class="group-desc">${group.description}</p>
+          `}
+        </div>
         <span class="status-badge ${statusClass}">
           ${(status === 'discovering' || status === 'connecting' || status === 'fetching')
             && html`<span class="spinner"></span>${' '}`}
           ${statusLabel}
         </span>
+        ${group && group.is_admin && html`
+          <button class="admin-btn danger" style="margin-left:auto"
+            onClick=${async () => {
+              if (!confirm(t('group.delete_group_confirm', { name: group.name }))) return;
+              try {
+                await hubFetch('/v1/groups/' + groupId, { method: 'DELETE', token });
+                navigate('/');
+                window.location.reload();
+              } catch (err) { setError(err.message); }
+            }}>${t('group.delete_group')}</button>
+        `}
       </div>
       ${error && html`<div class="error-msg" style="margin-bottom:12px">${error}</div>`}
       ${dlState && html`
@@ -954,21 +1177,21 @@ function GroupPage({ groupId, group, token, username }) {
                               setMenuOpen(null);
                               if (e.type === 'video') setVideoEntry(e);
                               else setPreviewEntry(e);
-                            }}>${t('group.view')}</button>
+                            }}><span class="fmi">${'\u{1F441}'}</span> ${t('group.view')}</button>
                           `}
                           <button onClick=${() => { setMenuOpen(null); downloadFile(e); }}>
-                            ${t('group.download')}
+                            <span class="fmi">${'\u{2B07}'}</span> ${t('group.download')}
                           </button>
                           ${e.type === 'video' && html`
                             <button onClick=${() => { setMenuOpen(null); setVideoEntry(e); }}>
-                              ${t('group.play')}
+                              <span class="fmi">${'\u{25B6}'}</span> ${t('group.play')}
                             </button>
                           `}
-                          ${group && group.is_admin && status === 'connected' && html`
+                          ${(isNodeAdmin || (userId && e.uploader_id === userId)) && status === 'connected' && html`
                             <button class="danger" onClick=${() => {
                               setMenuOpen(null);
                               if (confirm(t('group.delete_confirm', { name: e.name }))) deleteFile(e);
-                            }}>${t('group.delete')}</button>
+                            }}><span class="fmi">${'\u{1F5D1}'}</span> ${t('group.delete')}</button>
                           `}
                         </div>
                       `}
@@ -987,14 +1210,19 @@ function GroupPage({ groupId, group, token, username }) {
 
         ${tab === 'chat' && status === 'connected' && html`
           <${ChatPanel} transportRef=${transportRef} username=${username}
-            entries=${entries} gekRef=${gekRef} onRefreshIndex=${refreshIndex} />
+            entries=${entries} gekRef=${gekRef} onRefreshIndex=${refreshIndex}
+            onPreview=${(entry) => {
+              if (entry.type === 'video') setVideoEntry(entry);
+              else setPreviewEntry(entry);
+            }} />
         `}
         ${tab === 'chat' && status !== 'connected' && html`
           <p class="page-message"><span class="spinner"></span>${' '}${t('status.connecting')}</p>
         `}
 
         ${tab === 'members' && html`
-          <${MembersPanel} groupId=${groupId} group=${group} token=${token} />
+          <${MembersPanel} groupId=${groupId} group=${group} token=${token}
+            transportRef=${transportRef} gekRef=${gekRef} />
         `}
       `}
       ${status === 'offline' && html`
@@ -1046,10 +1274,6 @@ function FilePreview({ entry, transportRef, gekRef, onClose }) {
         return;
       }
       try {
-        if (!gekRef.current && window.MeshBayCrypto) {
-          const gekB64 = await transport.fetchGEK();
-          gekRef.current = await window.MeshBayCrypto.importGEK(gekB64);
-        }
         const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
         let downloaded = 0;
         const chunks = await pipelinedDownload(
@@ -1139,7 +1363,7 @@ function _b64ToU8(b64) {
 
 // ── Members Panel ────────────────────────────────────────────────────────
 
-function MembersPanel({ groupId, group, token }) {
+function MembersPanel({ groupId, group, token, transportRef, gekRef }) {
   const [members, setMembers] = useState([]);
   const [adminId, setAdminId] = useState('');
   const [loading, setLoading] = useState(true);
@@ -1168,30 +1392,28 @@ function MembersPanel({ groupId, group, token }) {
     setInviting(true);
     setError('');
     try {
-      const pubkeys = await hubFetch(`/v1/users/${inviteUser.trim()}/pubkeys`);
+      const transport = transportRef && transportRef.current;
+      const username = inviteUser.trim();
+
+      // Fetch invitee's public keys (hub = public key directory)
+      const pubkeys = await hubFetch(`/v1/users/${username}/pubkeys`, { token });
       const pkXBytes = Uint8Array.from(atob(pubkeys.pk_x25519), c => c.charCodeAt(0));
 
-      const gekB64 = await (async () => {
-        const transport = window._activeTransport;
-        if (transport && transport.connected) {
-          return await transport.fetchGEK();
-        }
-        const bundleResp = await hubFetch(`/v1/groups/${groupId}/gek`, { token });
-        if (!_sessionKeys) throw new Error('No session keys — log in via browser registration');
-        const skXB64 = _sessionKeys.skXB64;
-        const skXRaw = Uint8Array.from(atob(skXB64), c => c.charCodeAt(0));
-        const meResp = await hubFetch('/v1/users/me', { token });
-        const myPubkeys = await hubFetch(`/v1/users/${meResp.username}/pubkeys`);
-        const myPkX = Uint8Array.from(atob(myPubkeys.pk_x25519), c => c.charCodeAt(0));
-        const rawGek = await window.MeshBayCrypto.unwrapGEK(bundleResp, skXRaw, myPkX);
-        return btoa(String.fromCharCode(...rawGek));
-      })();
+      // Get raw GEK from the active transport connection
+      if (!transport || !transport.connected || !transport.gekRaw) {
+        throw new Error('Not connected to node or no GEK available');
+      }
+      const gekBytes = transport.gekRaw;
 
-      const gekBytes = Uint8Array.from(atob(gekB64), c => c.charCodeAt(0));
+      // Wrap GEK for invitee and store on node via P2P
       const bundle = await window.MeshBayCrypto.wrapGEK(gekBytes, pkXBytes);
-      await hubFetch(`/v1/groups/${groupId}/members/${inviteUser.trim()}/gek`, {
-        method: 'POST', token, body: bundle,
+      await transport.storeGekBundle(pubkeys.user_id, groupId, bundle);
+
+      // Add member on hub (membership management only)
+      await hubFetch(`/v1/groups/${groupId}/members/${username}`, {
+        method: 'POST', token, body: {},
       });
+
       setInviteUser('');
       loadMembers();
     } catch (err) {
@@ -1263,19 +1485,17 @@ function _parsePayload(raw) {
 function ChatImage({ filename, entries, transportRef, gekRef }) {
   const [blobUrl, setBlobUrl] = useState(null);
   const [loading, setLoading] = useState(true);
+  const loadedRef = useRef(false);
 
   useEffect(() => {
+    if (loadedRef.current) return;
     let cancelled = false;
     const load = async () => {
       const transport = transportRef.current;
-      if (!transport || !transport.connected) { setLoading(false); return; }
+      if (!transport || !transport.connected) { setLoading(true); return; }
       const entry = entries.find(e => e.name === filename);
-      if (!entry) { setLoading(false); return; }
+      if (!entry) { setLoading(true); return; }
       try {
-        if (!gekRef.current && window.MeshBayCrypto) {
-          const gekB64 = await transport.fetchGEK();
-          gekRef.current = await window.MeshBayCrypto.importGEK(gekB64);
-        }
         const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
         const chunks = await pipelinedDownload(transport, gekRef.current, entry.id, totalChunks);
         if (cancelled) return;
@@ -1283,13 +1503,14 @@ function ChatImage({ filename, entries, transportRef, gekRef }) {
         const mime = ext === 'png' ? 'image/png' : ext === 'gif' ? 'image/gif'
           : ext === 'webp' ? 'image/webp' : ext === 'svg' ? 'image/svg+xml' : 'image/jpeg';
         const blob = new Blob(chunks, { type: mime });
+        loadedRef.current = true;
         setBlobUrl(URL.createObjectURL(blob));
       } catch { /* ignore */ }
       if (!cancelled) setLoading(false);
     };
     load();
     return () => { cancelled = true; };
-  }, [filename]);
+  }, [filename, entries.length]);
 
   useEffect(() => {
     return () => { if (blobUrl) URL.revokeObjectURL(blobUrl); };
@@ -1300,7 +1521,7 @@ function ChatImage({ filename, entries, transportRef, gekRef }) {
   return html`<img class="chat-att-thumb" src=${blobUrl} alt=${filename} />`;
 }
 
-function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex }) {
+function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex, onPreview }) {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState('');
   const [sending, setSending] = useState(false);
@@ -1377,6 +1598,7 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex })
         const buf = new Uint8Array(await slice.arrayBuffer());
         await transport.uploadChunk(file.name, i, totalChunks, buf);
       }
+      await new Promise(r => setTimeout(r, 2500));
       if (onRefreshIndex) await onRefreshIndex();
       const ext = file.name.split('.').pop().toLowerCase();
       const ftype = ['jpg','jpeg','png','gif','webp','svg'].includes(ext) ? 'image'
@@ -1423,7 +1645,11 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex })
               `}
               <div class="chat-bubble ${isOwn ? 'chat-bubble-own' : ''}">
                 ${att ? html`
-                  <div class="chat-attachment">
+                  <div class="chat-attachment" style="cursor:pointer" onClick=${() => {
+                    if (!onPreview) return;
+                    const entry = entries.find(e => e.name === att.filename);
+                    if (entry) onPreview(entry);
+                  }}>
                     ${att.type === 'image'
                       ? html`<${ChatImage} filename=${att.filename} entries=${entries}
                               transportRef=${transportRef} gekRef=${gekRef} />`
@@ -1522,11 +1748,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
     };
 
     const startStream = async () => {
-      if (!gekRef.current && window.MeshBayCrypto) {
-        const gekB64 = await transport.fetchGEK();
-        gekRef.current = await window.MeshBayCrypto.importGEK(gekB64);
-      }
-
       transport.onStreamInit = (msg) => {
         if (cancelled) return;
         const mime = `video/mp4; codecs="${msg.codec}"`;
@@ -1744,6 +1965,18 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
     try { return JSON.parse(localStorage.getItem('mb_muted') || '{}'); }
     catch { return {}; }
   });
+  const [nodeKey, setNodeKey] = useState('');
+  const [currentNodeKey, setCurrentNodeKey] = useState(null);
+  const [nodeKeyStatus, setNodeKeyStatus] = useState('');
+  const [nodeKeyLoading, setNodeKeyLoading] = useState(false);
+
+  useEffect(() => {
+    hubFetch(`/v1/users/${user.username}/pubkeys`, { token: user.token })
+      .then(data => {
+        if (data.pk_node_ed25519) setCurrentNodeKey(data.pk_node_ed25519);
+      })
+      .catch(() => {});
+  }, [user.username, user.token]);
 
   const onLocaleChange = useCallback((e) => {
     const code = e.target.value;
@@ -1764,6 +1997,26 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
     });
   }, []);
 
+  const submitNodeKey = useCallback(async () => {
+    const key = nodeKey.trim();
+    if (!key) return;
+    setNodeKeyLoading(true);
+    setNodeKeyStatus('');
+    try {
+      await hubFetch('/v1/users/me/node_key', {
+        method: 'PUT', token: user.token,
+        body: { pk_node_ed25519: key },
+      });
+      setCurrentNodeKey(key);
+      setNodeKey('');
+      setNodeKeyStatus(t('settings.node_key_success'));
+    } catch (e) {
+      setNodeKeyStatus(e.message);
+    } finally {
+      setNodeKeyLoading(false);
+    }
+  }, [nodeKey, user.token]);
+
   return html`
     <div>
       <h2>${t('settings.title')}</h2>
@@ -1781,6 +2034,32 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
       </div>
 
       <div class="settings-section">
+        <h3 class="settings-heading">${t('settings.node_key')}</h3>
+        <p style="font-size:0.85em;color:var(--text-dim);margin-bottom:8px">${t('settings.node_key_desc')}</p>
+        ${currentNodeKey && html`
+          <div class="settings-row" style="margin-top:8px">
+            <span class="settings-label">${t('settings.node_key_current')}</span>
+            <code class="settings-value" style="font-size:0.8em;word-break:break-all">${currentNodeKey}</code>
+          </div>
+        `}
+        <div style="display:flex;gap:8px;margin-top:10px;align-items:center">
+          <input type="text" class="admin-search" style="flex:1;font-family:monospace;font-size:0.85em"
+            placeholder=${t('settings.node_key_placeholder')}
+            value=${nodeKey} onInput=${e => setNodeKey(e.target.value)}
+            onKeyDown=${e => e.key === 'Enter' && submitNodeKey()} />
+          <button class="admin-btn" onClick=${submitNodeKey}
+            disabled=${nodeKeyLoading || !nodeKey.trim()}>
+            ${t('settings.node_key_submit')}
+          </button>
+        </div>
+        ${nodeKeyStatus && html`
+          <p style="margin-top:6px;font-size:0.85em;color:${nodeKeyStatus === t('settings.node_key_success') ? 'var(--green, #22c55e)' : 'var(--red, #ef4444)'}">
+            ${nodeKeyStatus}
+          </p>
+        `}
+      </div>
+
+      <div class="settings-section">
         <h3 class="settings-heading">${t('settings.appearance')}</h3>
         <div class="settings-row">
           <span class="settings-label">${t('settings.theme')}</span>
@@ -1987,7 +2266,7 @@ function AdminPage({ token }) {
                     <option value="admin">admin</option>
                   </select>
                 </td>
-                <td><span class="badge">${u.status}</span></td>
+                <td><span class="badge ${u.status === 'active' ? 'badge-ok' : u.status === 'suspended' ? 'badge-err' : ''}">${u.status}</span></td>
                 <td>${new Date(u.created_at).toLocaleDateString()}</td>
                 <td class="admin-actions">
                   <button class="admin-btn" onClick=${() => showUserDetail(u.id)}>${t('admin.btn_details')}</button>
@@ -2024,7 +2303,7 @@ function AdminPage({ token }) {
                 <td>${g.name}</td>
                 <td><span class="badge">${g.visibility}</span></td>
                 <td>${g.member_count}</td>
-                <td><span class="badge">${g.status}</span></td>
+                <td><span class="badge ${g.status === 'active' ? 'badge-ok' : g.status === 'suspended' ? 'badge-err' : ''}">${g.status}</span></td>
                 <td>${new Date(g.created_at).toLocaleDateString()}</td>
                 <td class="admin-actions">
                   ${g.status === 'active'
@@ -2058,15 +2337,17 @@ function AdminPage({ token }) {
         <table class="admin-table">
           <thead><tr>
             <th>${t('admin.col_time')}</th>
+            <th>${t('admin.col_user')}</th>
             <th>${t('admin.col_event')}</th>
             <th>${t('admin.col_ip')}</th>
             <th>${t('admin.col_detail')}</th>
           </tr></thead>
           <tbody>
-            ${logs.length === 0 && html`<tr><td colspan="4" class="admin-empty">${t('admin.no_logs')}</td></tr>`}
+            ${logs.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_logs')}</td></tr>`}
             ${logs.map(lg => html`
               <tr key=${lg.id}>
                 <td style="white-space:nowrap">${new Date(lg.timestamp).toLocaleString()}</td>
+                <td>${lg.username || ''}</td>
                 <td><span class="badge">${lg.event}</span></td>
                 <td>${lg.ip_address}</td>
                 <td>${lg.detail || ''}</td>
@@ -2208,8 +2489,8 @@ function App() {
 
   useEffect(() => { setMenuOpen(false); }, [route]);
 
-  const toggleTheme = useCallback(() => {
-    setTheme(prev => resolveTheme(prev) === 'dark' ? 'light' : 'dark');
+  const changeTheme = useCallback((val) => {
+    setTheme(val);
   }, []);
 
   const authCtx = {
@@ -2218,9 +2499,14 @@ function App() {
       let token, refreshToken;
       if (window.MeshBayKeys) {
         const data = await window.MeshBayKeys.loginAndRecover(username, password);
-        _sessionKeys = { skXB64: data.skXB64, skEdB64: data.skEdB64 };
         token = data.accessToken;
         refreshToken = data.refreshToken;
+        _bundleKey = data.bundleKey;
+        await _storeBundleKey(_bundleKey);
+        if (data.skXB64) {
+          _sessionKeys = { skXB64: data.skXB64, skEdB64: data.skEdB64 };
+          _pendingBundlePush = data.keypairBundleEnc;
+        }
       } else {
         const data = await hubFetch('/v1/users/login', {
           method: 'POST',
@@ -2230,7 +2516,12 @@ function App() {
         refreshToken = data.refresh_token;
       }
       const me = await hubFetch('/v1/users/me', { token });
-      const u = { username, token, refreshToken, role: me.role };
+      if (_sessionKeys) {
+        const pubkeys = await hubFetch(`/v1/users/${username}/pubkeys`, { token });
+        _sessionKeys.pkXB64 = pubkeys.pk_x25519;
+        _saveSessionKeys();
+      }
+      const u = { username, userId: me.user_id, token, refreshToken, role: me.role };
       setUser(u);
       saveAuth(u);
     },
@@ -2266,7 +2557,7 @@ function App() {
     const group = groups.find(g => g.id === groupId);
     page = html`<${GroupPage}
       groupId=${groupId} group=${group} token=${user.token}
-      username=${user.username} />`;
+      username=${user.username} userId=${user.userId} />`;
   } else if (route === '/admin') {
     page = (user.role === 'moderator' || user.role === 'admin')
       ? html`<${AdminPage} token=${user.token} />`
@@ -2282,8 +2573,8 @@ function App() {
     <${AuthContext.Provider} value=${authCtx}>
       <${Nav}
         user=${user}
-        theme=${resolved}
-        onThemeToggle=${toggleTheme}
+        theme=${theme}
+        onThemeChange=${changeTheme}
         onLogout=${authCtx.logout}
         onMenuToggle=${() => setMenuOpen(o => !o)}
         unreadCount=${unreadCount} />