From 2e9490ca27047ae03e495d397abbe1aec1b2273a Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Thu, 20 Aug 2026 22:21:19 +0200
Subject: feat: unified group management, public groups, and activity-based
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create Group wizard (Electron-only) consolidates 6 steps across 4 interfaces
into a single multi-step page: group creation on hub, node attachment, root
selection via folder picker, GEK initialization, and auto-pairing — all in one
flow. Browser SPA keeps its current behavior unchanged.

Public group support (Option A — GEK for all groups):
- All groups have GEK regardless of visibility; open-join groups auto-admit
  via TOFU when join_policy is "open"
- Key rotation blocked for public groups (API guard + UI hidden)
- Hub signaling allows WebRTC offers for nodes hosting open-join groups even
  when the caller isn't a member yet
- attach_group writes join_policy to node.toml
- Daemon loads GEK for all groups, not just private ones
- Known-device path in join_request now auto-admits to open-join groups

Node loopback API bridge (Electron IPC):
- node:detect, node:call, node:pairing-code IPC handlers in main process
- Renderer never sees tokens, paths, or keys (session token = physical access)
- platform.js node namespace for UI consumption
- Loopback endpoints: roots CRUD, member-upload toggle, reload

Bug fixes:
- Root change detection: removed premature ctx["roots"] updates from add_root
  and remove_root that prevented indexer retarget on reload
- Duplicate offline message: global fallback now gated on !group
- Signaling membership check: fallback to open-join groups for non-members

Sidebar groups sorted by last_activity_at (most recent first):
- New Group.last_activity_at column with Alembic migration
- POST /v1/groups/{id}/activity endpoint, called on connect and chat send
- Client-side sort + throttled hub updates (1/min)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/meshbay-hub/src/meshbay_hub/static/app.js | 501 +++++++++++++++++++--
 .../src/meshbay_hub/static/locales/en.js           |  33 +-
 .../src/meshbay_hub/static/locales/fr.js           |   2 +-
 .../meshbay-hub/src/meshbay_hub/static/platform.js |  31 +-
 .../meshbay-hub/src/meshbay_hub/static/style.css   |  68 +++
 5 files changed, 597 insertions(+), 38 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 3fdba07..50ee9f6 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -638,21 +638,23 @@ function Sidebar({ groups, presence, route, menuOpen, role, hasNodeKey }) {
            href="#/explore"><${Icon} name="globe" /> ${t('sidebar.public_groups')}</a>
         <a class="sidebar-item ${route === '/search' ? 'active' : ''}"
            href="#/search"><${Icon} name="search" /> ${t('sidebar.search')}</a>
-        <a class="sidebar-item ${route === '/create-group' ? 'active' : ''}"
-           href="#/create-group"><${Icon} name="plus" /> ${t('sidebar.create_group')}</a>
       </div>
       ${platform.capabilities.nodeAdmin && hasNodeKey && html`
         <div class="sidebar-section">
           <div class="sidebar-heading">${t('sidebar.node')}</div>
           <a class="sidebar-item ${route === '/node' ? 'active' : ''}"
              href="#/node"><${Icon} name="server" /> ${t('node.title')}</a>
+          <a class="sidebar-item ${route === '/create-group' ? 'active' : ''}"
+             href="#/create-group"><${Icon} name="plus" /> ${t('sidebar.create_group')}</a>
         </div>
       `}
       <div class="sidebar-section">
         <div class="sidebar-heading">${t('sidebar.my_groups')}</div>
         ${groups.length === 0
           ? html`<div class="sidebar-empty">${t('sidebar.no_groups')}</div>`
-          : groups.map(g => {
+          : [...groups].sort((a, b) =>
+              (b.last_activity_at || b.created_at || '').localeCompare(
+               a.last_activity_at || a.created_at || '')).map(g => {
             // Three states, each backed by something. `node_online` comes from
             // the hub's signaling registry and rides on the group list itself,
             // so there is no poll and no timer; a connection this browser tried
@@ -984,7 +986,9 @@ function ExplorePage({ token, myGroupIds }) {
     <div>
       <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
         <h2 style="margin:0">${t('explore.title')}</h2>
-        <a class="admin-btn" href="#/create-group">${t('explore.create_group')}</a>
+        ${platform.node.available && html`
+          <a class="admin-btn" href="#/create-group">${t('explore.create_group')}</a>
+        `}
       </div>
       <div class="file-toolbar" style="margin-bottom:16px">
         <input type="text" class="admin-search" placeholder="${t('explore.search')}"
@@ -1028,7 +1032,12 @@ function ExplorePage({ token, myGroupIds }) {
 
 // ── Create Group Page ────────────────────────────────────────────────────────
 
-function CreateGroupPage({ token, onCreated }) {
+function CreateGroupPage(props) {
+  if (platform.node.available) return html`<${CreateGroupWizard} ...${props} />`;
+  return html`<${CreateGroupFormSimple} ...${props} />`;
+}
+
+function CreateGroupFormSimple({ token, onCreated }) {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [joinPolicy, setJoinPolicy] = useState('invite');
@@ -1041,8 +1050,6 @@ function CreateGroupPage({ token, onCreated }) {
     setLoading(true);
     setError('');
     try {
-      // Derived, not asked: "open" is what makes a group listed, and there is
-      // no third combination the server would accept.
       const body = { name: name.trim(), join_policy: joinPolicy,
                      visibility: joinPolicy === 'open' ? 'public' : 'private' };
       if (description.trim()) body.description = description.trim().slice(0, 512);
@@ -1083,15 +1090,6 @@ function CreateGroupPage({ token, onCreated }) {
           </div>
         </div>
 
-        ${/* One question, not two. Visibility and admission were separate
-              selectors that could only ever be set together: a public group
-              admits everyone by definition, and a private one that anyone may
-              join is a directory listing nobody can find. The server already
-              refused public+invite with a 422 — the form could build a request
-              that could not succeed. Now the answer to "who can join" settles
-              both, and the descriptions say what each one means for who can
-              *find* the group, which is the part the visibility box was there
-              to state and no longer needs to. */ html`
         <div class="settings-section">
           <h3 class="settings-heading">${t('create_group.join_policy')}</h3>
           <div class="choice-list">
@@ -1115,7 +1113,6 @@ function CreateGroupPage({ token, onCreated }) {
             </label>
           </div>
         </div>
-        `}
 
         <button class="btn-primary" type="submit" disabled=${loading}>
           ${loading ? t('create_group.creating') : t('create_group.submit')}
@@ -1125,6 +1122,300 @@ function CreateGroupPage({ token, onCreated }) {
   `;
 }
 
+// ── Create Group Wizard (Electron-only) ─────────────────────────────────────
+
+function CreateGroupWizard({ token, onCreated }) {
+  const [step, setStep] = useState(0);  // 0=node check, 1=details, 2=setup, 3=done
+  const [nodeStatus, setNodeStatus] = useState(null);  // null=loading, object=result
+  const [error, setError] = useState('');
+
+  // Step 1 fields
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [joinPolicy, setJoinPolicy] = useState('invite');
+  const [roots, setRoots] = useState([]);
+  const [uploadIdx, setUploadIdx] = useState(0);
+
+  // Step 2 progress
+  const [setupSteps, setSetupSteps] = useState([]);
+  const [setupError, setSetupError] = useState('');
+  const [groupId, setGroupId] = useState('');
+
+  // Step 0: detect node
+  const detectNode = useCallback(async () => {
+    setNodeStatus(null);
+    setError('');
+    try {
+      const result = await platform.node.detect();
+      setNodeStatus(result);
+      if (result.detected) {
+        // Auto-link node key to hub if not already done
+        if (result.pk_node_ed25519) {
+          try {
+            await hubFetch('/v1/users/me/node_key', {
+              method: 'PUT', token,
+              body: { pk_node_ed25519: result.pk_node_ed25519 },
+            });
+          } catch { /* already linked or same key */ }
+        }
+        setStep(1);
+      }
+    } catch (err) {
+      setError(err.message);
+      setNodeStatus({ detected: false });
+    }
+  }, [token]);
+
+  useEffect(() => { detectNode(); }, [detectNode]);
+
+  const addRoot = useCallback(async () => {
+    const chosen = await platform.rootPicker.choose();
+    if (!chosen) return;
+    if (roots.some(r => r.path === chosen.path)) return;
+    setRoots(prev => [...prev, chosen]);
+  }, [roots]);
+
+  const removeRoot = useCallback((idx) => {
+    setRoots(prev => {
+      const next = prev.filter((_, i) => i !== idx);
+      if (uploadIdx >= next.length && next.length > 0) setUploadIdx(0);
+      return next;
+    });
+  }, [uploadIdx]);
+
+  const runSetup = useCallback(async () => {
+    setStep(2);
+    setSetupError('');
+    const steps = [
+      { label: t('wizard.step_create_hub'), status: 'pending' },
+      { label: t('wizard.step_attach'), status: 'pending' },
+    ];
+    if (roots.length > 1)
+      steps.push({ label: t('wizard.step_add_roots'), status: 'pending' });
+    steps.push({ label: t('wizard.step_gek'), status: 'pending' });
+    steps.push({ label: t('wizard.step_pair'), status: 'pending' });
+    setSetupSteps([...steps]);
+
+    let si = 0;
+    const update = (status) => {
+      steps[si].status = status;
+      setSetupSteps([...steps]);
+    };
+    const advance = () => { si++; };
+
+    try {
+      // 1. Create group on hub
+      update('running');
+      const body = { name: name.trim(), join_policy: joinPolicy,
+                     visibility: joinPolicy === 'open' ? 'public' : 'private' };
+      if (description.trim()) body.description = description.trim().slice(0, 512);
+      const data = await hubFetch('/v1/groups', { method: 'POST', token, body });
+      const gid = data.group_id;
+      setGroupId(gid);
+      update('done');
+      advance();
+
+      // 2. Attach to node with first root
+      update('running');
+      const mainRoot = roots[uploadIdx] || roots[0];
+      const attachBody = { name: name.trim(), shared_dir: mainRoot.path };
+      if (roots.length === 1 || uploadIdx === 0) {
+        attachBody.upload_dir = mainRoot.path;
+      }
+      await platform.node.call('POST', '/api/groups/attach', attachBody);
+      await platform.node.call('POST', '/api/reload');
+      update('done');
+      advance();
+
+      // 3. Add extra roots (if >1)
+      if (roots.length > 1) {
+        update('running');
+        for (let i = 0; i < roots.length; i++) {
+          if (i === (uploadIdx < roots.length ? uploadIdx : 0)) continue;
+          const r = roots[i];
+          await platform.node.call('POST', `/api/groups/${gid}/roots`, {
+            path: r.path, name: r.name,
+            upload: i === uploadIdx,
+          });
+        }
+        update('done');
+        advance();
+      }
+
+      // 4. GEK init
+      update('running');
+      await platform.node.call('POST', `/api/groups/${gid}/gek`);
+      update('done');
+      advance();
+
+      // 5. Generate pairing code
+      update('running');
+      const pairResult = await platform.node.call('POST', '/api/operator/pair');
+      if (pairResult && pairResult.code) {
+        await platform.node.setPairingCode(pairResult.code);
+      }
+      update('done');
+
+      // Reload node config so it picks up the new group
+      try { await platform.node.call('POST', '/api/reload'); } catch { /* best effort */ }
+
+      setStep(3);
+      if (onCreated) onCreated();
+    } catch (err) {
+      update('error');
+      setSetupError(platform.bridgeMessage(err));
+    }
+  }, [name, description, joinPolicy, roots, uploadIdx, token, onCreated]);
+
+  // Step 0: Node detection
+  if (step === 0) {
+    if (nodeStatus === null) {
+      return html`<div class="page-content">
+        <h2>${t('wizard.title')}</h2>
+        <p class="page-message">${t('wizard.detecting')}</p>
+      </div>`;
+    }
+    if (!nodeStatus.detected) {
+      return html`<div class="page-content">
+        <h2>${t('wizard.title')}</h2>
+        <p class="page-message">${t('wizard.node_not_found')}</p>
+        ${error && html`<div class="error-msg">${error}</div>`}
+        <div style="display:flex;gap:8px;margin-top:16px">
+          <button class="btn btn-primary" onClick=${detectNode}>
+            ${t('wizard.retry')}</button>
+        </div>
+      </div>`;
+    }
+  }
+
+  // Step 1: Group details + directories
+  if (step === 1) {
+    const canProceed = name.trim() && roots.length > 0;
+    return html`<div class="page-content">
+      <h2>${t('wizard.title')}</h2>
+      ${error && html`<div class="error-msg" style="margin-bottom:16px">${error}</div>`}
+
+      <div class="settings-section">
+        <div class="form-field">
+          <label class="form-label">${t('create_group.name')}</label>
+          <input type="text" placeholder="${t('create_group.name_placeholder')}"
+            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>
+
+      <div class="settings-section">
+        <h3 class="settings-heading">${t('create_group.join_policy')}</h3>
+        <div class="choice-list">
+          <label class="choice ${joinPolicy === 'invite' ? 'selected' : ''}">
+            <input type="radio" name="join_policy" checked=${joinPolicy === 'invite'}
+              onChange=${() => setJoinPolicy('invite')} />
+            <${Icon} name="lock" cls="choice-icon" />
+            <span class="choice-text">
+              <span class="choice-title">${t('create_group.invite')}</span>
+              <span class="choice-desc">${t('create_group.invite_desc')}</span>
+            </span>
+          </label>
+          <label class="choice ${joinPolicy === 'open' ? 'selected' : ''}">
+            <input type="radio" name="join_policy" checked=${joinPolicy === 'open'}
+              onChange=${() => setJoinPolicy('open')} />
+            <${Icon} name="globe" cls="choice-icon" />
+            <span class="choice-text">
+              <span class="choice-title">${t('create_group.open')}</span>
+              <span class="choice-desc">${t('create_group.open_desc')}</span>
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <h3 class="settings-heading">${t('wizard.directories')}</h3>
+        <p style="font-size:0.85em;color:var(--text-dim);margin-bottom:8px">
+          ${t('wizard.directories_hint')}</p>
+        ${roots.map((r, i) => html`
+          <div class="wizard-root" key=${r.path}>
+            <div class="wizard-root-info">
+              <${Icon} name="folder" />
+              <span class="wizard-root-name">${r.name}</span>
+              <span class="wizard-root-path">${r.path}</span>
+              ${i === uploadIdx && html`
+                <span class="node-root-badge">${t('wizard.upload_target')}</span>`}
+            </div>
+            <div class="wizard-root-actions">
+              ${roots.length > 1 && i !== uploadIdx && html`
+                <button class="btn btn-small btn-secondary"
+                  onClick=${() => setUploadIdx(i)}>
+                  ${t('wizard.set_upload')}</button>`}
+              <button class="btn btn-small btn-danger"
+                onClick=${() => removeRoot(i)}>
+                ${t('wizard.remove')}</button>
+            </div>
+          </div>
+        `)}
+        <button class="btn btn-secondary" style="margin-top:8px"
+          onClick=${addRoot}>
+          <${Icon} name="folder-plus" /> ${t('wizard.add_directory')}
+        </button>
+      </div>
+
+      <div style="display:flex;gap:8px;margin-top:16px">
+        <button class="btn btn-primary" disabled=${!canProceed}
+          onClick=${runSetup}>
+          ${t('wizard.create_and_setup')}</button>
+      </div>
+    </div>`;
+  }
+
+  // Step 2: Automatic setup progress
+  if (step === 2) {
+    return html`<div class="page-content">
+      <h2>${t('wizard.title')}</h2>
+      <p class="page-message">${t('wizard.setting_up')}</p>
+      <div class="wizard-progress">
+        ${setupSteps.map((s, i) => html`
+          <div class="wizard-step wizard-step-${s.status}" key=${i}>
+            <span class="wizard-step-icon">
+              ${s.status === 'done' ? '✓' :
+                s.status === 'running' ? '●' :
+                s.status === 'error' ? '✗' : '○'}
+            </span>
+            <span>${s.label}</span>
+          </div>
+        `)}
+      </div>
+      ${setupError && html`
+        <div class="error-msg" style="margin-top:16px">${setupError}</div>
+        <div style="display:flex;gap:8px;margin-top:8px">
+          <button class="btn btn-primary" onClick=${runSetup}>
+            ${t('wizard.retry')}</button>
+          <button class="btn btn-secondary" onClick=${() => {
+            if (onCreated) onCreated();
+            navigate('/');
+          }}>
+            ${t('wizard.finish_later')}</button>
+        </div>
+      `}
+    </div>`;
+  }
+
+  // Step 3: Done
+  return html`<div class="page-content">
+    <h2>${t('wizard.done_title')}</h2>
+    <p class="page-message">${t('wizard.done_message')}</p>
+    <button class="btn btn-primary" style="margin-top:16px"
+      onClick=${() => navigate(`/groups/${groupId}`)}>
+      ${t('wizard.go_to_group')}</button>
+  </div>`;
+}
+
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
 const FILE_ICONS = {
@@ -1322,8 +1613,19 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   const [previewEntry, setPreviewEntry] = useState(null);
   const defaultTab = (userPrefs && (userPrefs[`default_tab:${groupId}`] || userPrefs['default_tab'])) || 'chat';
   const [tab, setTab] = useState(defaultTab);
+  useEffect(() => { setTab(defaultTab); }, [groupId]);
   const [groupMuted, setGroupMuted] = useState(() => !!(group && group.muted));
 
+  const _lastTouch = useRef(0);
+  const touchActivity = useCallback(() => {
+    const now = Date.now();
+    if (now - _lastTouch.current < 60_000) return;
+    _lastTouch.current = now;
+    const ts = new Date().toISOString();
+    if (onGroupUpdated) onGroupUpdated(groupId, { last_activity_at: ts });
+    hubFetch(`/v1/groups/${groupId}/activity`, { method: 'POST', token }).catch(() => {});
+  }, [groupId, token, onGroupUpdated]);
+
   const toggleGroupMute = useCallback(async () => {
     const next = !groupMuted;
     setGroupMuted(next);
@@ -1477,6 +1779,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
         if (cancelled) return;
         applyIndex(indexMsg);
         setStatus('connected');
+        touchActivity();
         // First-hand evidence, and the strongest available: this browser spoke
         // to the node. It outranks whatever the hub said in the group list.
         if (onPresence) onPresence(groupId, 'online');
@@ -2170,7 +2473,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
         ${tab === 'chat' && status === 'connected' && html`
           <${ChatPanel} transportRef=${transportRef} username=${username}
             entries=${entries} gekRef=${gekRef} onRefreshIndex=${refreshIndex}
-            mayUpload=${mayUpload}
+            mayUpload=${mayUpload} onActivity=${touchActivity}
             onPreview=${(entry) => {
               if (entry.type === 'video') setVideoEntry(entry);
               else setPreviewEntry(entry);
@@ -2194,7 +2497,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
             onPaired=${() => setOperatorPaired(true)} />
         `}
       `}
-      ${status === 'offline' && html`
+      ${status === 'offline' && !group && html`
         <p class="page-message">
           ${t('group.offline_title')}
           ${' '}${t('group.offline_hint')}
@@ -2381,6 +2684,31 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
   const [inviteUser, setInviteUser] = useState('');
   const [inviting, setInviting] = useState(false);
   const [error, setError] = useState('');
+
+  // Node loopback state (Electron-only)
+  const [nodeDetected, setNodeDetected] = useState(false);
+  const [nodeRoots, setNodeRoots] = useState([]);
+  const [nodeGroupName, setNodeGroupName] = useState('');
+  const [nodeBusy, setNodeBusy] = useState(false);
+  const [nodeMsg, setNodeMsg] = useState('');
+
+  const loadNodeInfo = useCallback(async () => {
+    if (!platform.node.available) return;
+    try {
+      const detect = await platform.node.detect();
+      if (!detect.detected) { setNodeDetected(false); return; }
+      setNodeDetected(true);
+      const data = await platform.node.call('GET', '/api/groups');
+      const groups = data.groups || [];
+      const ng = groups.find(g => g.id === groupId);
+      if (ng) {
+        setNodeRoots(ng.roots || []);
+        setNodeGroupName(ng.name || '');
+      }
+    } catch { setNodeDetected(false); }
+  }, [groupId]);
+
+  useEffect(() => { loadNodeInfo(); }, [loadNodeInfo]);
   const [inviteCode, setInviteCode] = useState(null);
   const [pairCode, setPairCode] = useState('');
   const [pairStatus, setPairStatus] = useState('');
@@ -2498,7 +2826,16 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
     setError('');
     setRemoving(member.user_id);
     try {
-      if (transport && transport.connected && operatorPaired) {
+      if (platform.node.available) {
+        try {
+          await platform.node.call('POST',
+            `/api/members/${member.user_id}/revoke?group_id=${groupId}`);
+        } catch { /* best effort — node may not host this group */ }
+        try {
+          await platform.node.call('POST',
+            `/api/members/${member.user_id}/unpin`);
+        } catch { /* best effort */ }
+      } else if (transport && transport.connected && operatorPaired) {
         const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
         const signFn = (sk && window.MeshBayKeys)
           ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
@@ -2585,7 +2922,8 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
       ${error && html`<div class="error-msg" style="margin-bottom:12px">${error}</div>`}
 
       ${/* Inviting needs the node: it is the node that wraps the group key and
-            issues the code, not the hub. */ isAdmin && html`
+            issues the code, not the hub. Public groups admit anyone — no invite. */
+        isAdmin && group?.join_policy !== 'open' && html`
         <div class="settings-section">
           <h3 class="settings-heading">${t('members.invite_title')}</h3>
           ${!connected && html`
@@ -2696,9 +3034,96 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
         </div>
       `}
 
-      ${/* Before the roster, not after it: this is what someone came here to
-            do, and a list of two hundred names is a long way to scroll for
-            it. */ html`
+      ${/* Roots management (Electron-only, when node is local) */
+        nodeDetected && nodeRoots.length > 0 && html`
+        <div class="settings-section">
+          <h3 class="settings-heading">${t('settings_node.roots')}</h3>
+          ${nodeMsg && html`<p class="settings-hint">${nodeMsg}</p>`}
+          <div class="node-roots">
+            ${nodeRoots.map(r => html`
+              <div class="node-root ${!r.available ? 'node-root-unavailable' : ''}"
+                   key=${r.name}>
+                <div class="node-root-info">
+                  <span class="node-root-name">
+                    <${Icon} name="folder" />
+                    ${r.name}
+                  </span>
+                  ${r.upload && html`
+                    <span class="node-root-badge">${t('node.upload_root')}</span>`}
+                  ${!r.available && html`
+                    <span class="node-root-badge node-root-badge-warn">
+                      ${t('node.unavailable')}</span>`}
+                </div>
+                ${nodeRoots.length > 1 && !r.upload && html`
+                  <button class="btn btn-small btn-danger"
+                    disabled=${nodeBusy}
+                    onClick=${async () => {
+                      if (!confirm(t('node.root_remove_confirm', { name: r.name }))) return;
+                      setNodeBusy(true); setNodeMsg('');
+                      try {
+                        await platform.node.call('DELETE',
+                          '/api/groups/' + groupId + '/roots/' + encodeURIComponent(r.name));
+                        await platform.node.call('POST', '/api/reload');
+                        setNodeMsg(t('node.root_removed'));
+                        await loadNodeInfo();
+                      } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
+                      finally { setNodeBusy(false); }
+                    }}>
+                    ${t('node.remove_root')}</button>`}
+              </div>
+            `)}
+            <button class="btn btn-small btn-secondary" style="margin-top:8px"
+              disabled=${nodeBusy}
+              onClick=${async () => {
+                const chosen = await platform.rootPicker.choose();
+                if (!chosen) return;
+                setNodeBusy(true); setNodeMsg('');
+                try {
+                  await platform.node.call('POST',
+                    '/api/groups/' + groupId + '/roots',
+                    { path: chosen.path, name: chosen.name });
+                  await platform.node.call('POST', '/api/reload');
+                  setNodeMsg(t('node.root_added'));
+                  await loadNodeInfo();
+                } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
+                finally { setNodeBusy(false); }
+              }}>
+              <${Icon} name="folder-plus" /> ${t('node.add_root')}
+            </button>
+          </div>
+        </div>
+      `}
+
+      ${/* Upload toggle via loopback when MNP not connected */
+        nodeDetected && !connected && html`
+        <div class="settings-section">
+          <h3 class="settings-heading">${t('members.uploads_title')}</h3>
+          <div class="settings-row">
+            <span class="settings-label">
+              ${memberUpload ? t('members.uploads_on') : t('members.uploads_off')}
+            </span>
+            <button class="admin-btn" disabled=${nodeBusy}
+              onClick=${async () => {
+                setNodeBusy(true); setNodeMsg('');
+                try {
+                  const newVal = !memberUpload;
+                  await platform.node.call('PUT',
+                    '/api/groups/' + groupId + '/member-upload',
+                    { allowed: newVal });
+                  if (onMemberUpload) onMemberUpload(newVal);
+                } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
+                finally { setNodeBusy(false); }
+              }}>
+              ${memberUpload ? t('members.uploads_disable')
+                             : t('members.uploads_enable')}
+            </button>
+          </div>
+          <p class="settings-hint">${t('members.uploads_hint')}</p>
+        </div>
+      `}
+
+      ${/* Delete/leave — node detach first (reversible), then hub delete
+            (irreversible). */ html`
         <div class="settings-section">
           <h3 class="settings-heading">
             ${isOwner ? t('group.delete_group') : t('group.leave')}
@@ -2713,6 +3138,15 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                 <button class="admin-btn danger" onClick=${async () => {
                   if (!confirm(t('group.delete_group_confirm', { name: group.name }))) return;
                   try {
+                    // Node detach first (reversible), then hub delete (irreversible)
+                    if (nodeDetected && nodeGroupName) {
+                      try {
+                        await platform.node.call('POST', '/api/groups/detach',
+                          { name: nodeGroupName });
+                      } catch (detachErr) {
+                        if (!confirm(t('settings_node.detach_failed_continue'))) return;
+                      }
+                    }
                     await hubFetch('/v1/groups/' + groupId, { method: 'DELETE', token });
                     navigate('/');
                     window.location.reload();
@@ -2725,9 +3159,6 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                   try {
                     await hubFetch('/v1/groups/' + groupId + '/leave',
                                    { method: 'POST', token });
-                    // Dropped from the list here rather than reloading: a
-                    // reload would tear down the WebRTC connections other
-                    // groups hold.
                     if (onLeft) onLeft(groupId);
                   } catch (err) { setError(err.message); }
                 }}>${t('group.leave')}</button>
@@ -2899,7 +3330,7 @@ function ChatImage({ filename, entries, transportRef, gekRef }) {
 }
 
 function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
-                    onPreview, mayUpload = true }) {
+                    onPreview, mayUpload = true, onActivity }) {
   const [messages, setMessages] = useState([]);
   const [hasMore, setHasMore] = useState(false);
   const [loadingOlder, setLoadingOlder] = useState(false);
@@ -3072,6 +3503,7 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
         thread_id: null,
       }]);
       jumpToBottom();
+      if (onActivity) onActivity();
     } catch {
       setInput(text);
     } finally {
@@ -5248,7 +5680,7 @@ function NodePage({ token, username, userId, groups }) {
 
   if (status === 'idle' || status === 'connecting') {
     return html`<div class="page-content">
-      <p class="page-message">${t('status.connecting')}</p>
+      <p class="page-message"><span class="spinner"></span>${' '}${t('status.connecting')}</p>
     </div>`;
   }
   if (status === 'no_groups') {
@@ -5306,9 +5738,8 @@ function NodePage({ token, username, userId, groups }) {
                   ${!r.available && html`
                     <span class="node-root-badge node-root-badge-warn">
                       ${t('node.unavailable')}</span>`}
-                  <span class="node-root-kind">${r.kind}</span>
                 </div>
-                ${(g.roots || []).length > 1 && html`
+                ${(g.roots || []).length > 1 && !r.upload && html`
                   <button class="btn btn-small btn-danger"
                     disabled=${busy} onClick=${() => removeRoot(g.id, r.name)}>
                     ${t('node.remove_root')}</button>`}
@@ -5322,11 +5753,11 @@ function NodePage({ token, username, userId, groups }) {
 
           <div class="node-section">
             <span class="settings-heading">${t('node.gek')}</span>
-            ${g.has_gek ? html`
+            ${g.has_gek ? (g.visibility !== 'public' ? html`
               <button class="btn btn-small btn-secondary" disabled=${busy}
                 onClick=${() => rotateGek(g.id)}>
                 ${t('node.gek_rotate')}</button>
-            ` : html`
+            ` : html`<p class="node-hint">${t('node.gek_public_hint')}</p>`) : html`
               <p class="node-hint">${t('node.gek_init_hint')}</p>
             `}
           </div>
@@ -5433,7 +5864,9 @@ function NodePage({ token, username, userId, groups }) {
         `}
       </div>
 
-      ${(() => {
+      ${/* In Electron, the Create Group wizard handles attaching. Keep for
+            browser users who manage nodes via MNP. */
+        !platform.node.available && (() => {
         const hostedIds = new Set(nodeGroups.map(g => g.id));
         const unhosted = (groups || []).filter(g => !hostedIds.has(g.id));
         if (!unhosted.length) return null;
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js
index 4193f00..a8392c7 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js
@@ -125,7 +125,7 @@ export default {
   // Status
   'status.idle': 'Idle',
   'status.discovering': 'Finding nodes...',
-  'status.connecting': 'Connecting via WebRTC...',
+  'status.connecting': 'Connecting...',
   'status.connecting_short': 'Connecting...',
   'status.fetching': 'Fetching index...',
   'status.files': {
@@ -332,6 +332,36 @@ export default {
   'create_group.hint': 'A group needs a node to host files. You can create the group now and connect a node later.',
   'create_group.creating': 'Creating...',
 
+  // Create Group Wizard (Electron-only)
+  'wizard.title': 'Create Group',
+  'wizard.detecting': 'Detecting local node...',
+  'wizard.node_not_found': 'No local node detected. Make sure meshbay-node is running.',
+  'wizard.retry': 'Retry',
+  'wizard.skip_node': 'Continue without node',
+  'wizard.node_offline_warning': 'Node is not running. The group will be created on the hub only. You can connect the node later from the Node page.',
+  'wizard.directories': 'Shared directories',
+  'wizard.directories_hint': 'Choose the directories this group will share. At least one is required.',
+  'wizard.add_directory': 'Add directory',
+  'wizard.upload_target': 'upload target',
+  'wizard.set_upload': 'Set as upload target',
+  'wizard.remove': 'Remove',
+  'wizard.create_and_setup': 'Create and set up',
+  'wizard.create_hub_only': 'Create on hub only',
+  'wizard.setting_up': 'Setting up your group...',
+  'wizard.step_create_hub': 'Creating group on hub',
+  'wizard.step_attach': 'Attaching to node',
+  'wizard.step_add_roots': 'Adding directories',
+  'wizard.step_gek': 'Initializing encryption key',
+  'wizard.step_pair': 'Setting up pairing',
+  'wizard.finish_later': 'Finish setup later',
+  'wizard.done_title': 'Group created',
+  'wizard.done_message': 'Your group is ready. Your node is hosting it and encryption is set up.',
+  'wizard.go_to_group': 'Go to group',
+
+  // Unified Group Settings (node sections)
+  'settings_node.roots': 'Shared directories',
+  'settings_node.detach_failed_continue': 'Could not detach the group from the node. Delete on hub anyway?',
+
   // Members
   'members.col_role': 'Role',
   'members.group_role': 'Group role',
@@ -469,6 +499,7 @@ export default {
   'node.gek_rotate_confirm': 'Rotate the group key? Connected members will receive the new key automatically. Content already downloaded is unaffected.',
   'node.gek_rotated': 'Group key rotated.',
   'node.gek_init_hint': 'No group key yet. Run GEK init from the CLI to set one up.',
+  'node.gek_public_hint': 'Key rotation is not available for public groups.',
   'node.roster': 'Roster',
   'node.roster_load': 'Load roster',
   'node.roster_empty': 'No members pinned yet.',
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js
index fe6c666..9eb2f30 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js
@@ -125,7 +125,7 @@ export default {
   // Status
   'status.idle': 'Inactif',
   'status.discovering': 'Recherche de nodes...',
-  'status.connecting': 'Connexion via WebRTC...',
+  'status.connecting': 'Connexion…',
   'status.connecting_short': 'Connexion…',
   'status.fetching': "Récupération de l'index...",
   'status.files': {
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/platform.js b/packages/meshbay-hub/src/meshbay_hub/static/platform.js
index d379e9d..02107f5 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/platform.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/platform.js
@@ -207,8 +207,35 @@ export const rootPicker = {
   async choose() { return bridge && bridge.rootPicker ? bridge.rootPicker.choose() : null; },
 };
 
+/**
+ * The local node, if one is running on this machine.
+ *
+ * Detection probes `127.0.0.1:{ui_port}` with the session token read from the
+ * daemon's data directory. The renderer never sees the token — it names an
+ * operation and the main process executes it, the same trust model as hub:fetch.
+ *
+ * In a browser all calls resolve to a "not available" result, so the interface
+ * can gate features on `node.available` without a build flag.
+ */
+export const node = {
+  available: Boolean(bridge && bridge.node),
+  async detect() {
+    return bridge && bridge.node ? bridge.node.detect() : { detected: false };
+  },
+  async call(method, path, body) {
+    if (!bridge || !bridge.node) throw new Error('Node bridge not available');
+    return bridge.node.call(method, path, body);
+  },
+  async pairingCode() {
+    return bridge && bridge.node ? bridge.node.pairingCode() : null;
+  },
+  async setPairingCode(code) {
+    return bridge && bridge.node ? bridge.node.setPairingCode(code) : false;
+  },
+};
+
 export default { isNative, hubBase, capabilities, secrets, nativeSave,
-                 apiFetch, device, bridgeMessage, folder, rootPicker };
+                 apiFetch, device, bridgeMessage, folder, rootPicker, node };
 
 // Also a global, because `transport.js` is loaded as a classic script — it
 // predates the module graph and exposes `MeshBayTransport` the same way. The
@@ -217,5 +244,5 @@ export default { isNative, hubBase, capabilities, secrets, nativeSave,
 if (typeof window !== 'undefined') {
   window.MeshBayPlatform = { isNative, hubBase, capabilities, secrets,
                              nativeSave, apiFetch, device,
-                             bridgeMessage, folder, rootPicker };
+                             bridgeMessage, folder, rootPicker, node };
 }
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index ac3d08f..7ce073a 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2222,3 +2222,71 @@ a.transfer-name {
   align-items: center;
 }
 .node-attach-dir-row input { flex: 1; }
+
+/* ── Create Group Wizard ──────────────────────────────────────────────────── */
+
+.wizard-root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  gap: 8px;
+}
+.wizard-root + .wizard-root { margin-top: 6px; }
+.wizard-root-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.wizard-root-name { font-weight: 500; }
+.wizard-root-path {
+  font-size: 0.82em;
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wizard-root-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.wizard-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+}
+.wizard-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 0.9em;
+}
+.wizard-step-icon {
+  width: 20px;
+  text-align: center;
+  font-weight: 600;
+}
+.wizard-step-done .wizard-step-icon { color: var(--success); }
+.wizard-step-running .wizard-step-icon { color: var(--accent); }
+.wizard-step-error .wizard-step-icon { color: var(--error); }
+.wizard-step-pending { opacity: 0.5; }
+
+.warning-msg {
+  padding: 10px 14px;
+  background: color-mix(in srgb, #f59e0b 15%, transparent);
+  border: 1px solid #f59e0b;
+  border-radius: 8px;
+  font-size: 0.85em;
+}
-- 
cgit v1.2.3