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, 180 insertions, 12 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index f3dcbf4..e430201 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -95,20 +95,81 @@ a:hover { text-decoration: underline; }
 
 .nav-user { color: var(--text-dim); font-size: 0.9em; }
 
-.nav-theme {
-  background: none;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: var(--nav-text);
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1.1em;
+/* ── User Menu ──────────────────────────────────────────────────────────── */
+
+.user-menu-wrap { position: relative; }
+
+.user-menu-trigger {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--nav-text);
+  padding: 4px 10px 4px 4px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.85em;
+  transition: background 0.12s;
+}
+.user-menu-trigger:hover { background: rgba(255, 255, 255, 0.15); }
+
+.user-menu-avatar {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 0.8em;
+  flex-shrink: 0;
+}
+.user-menu-avatar.lg { width: 36px; height: 36px; font-size: 0.95em; }
+
+.user-menu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.user-menu-caret { font-size: 0.7em; color: rgba(255,255,255,0.5); }
+
+.user-menu-dropdown {
+  position: absolute;
+  right: 0; top: calc(100% + 6px);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+  min-width: 220px;
+  z-index: 120;
+  overflow: hidden;
+  padding: 4px 0;
 }
-.nav-theme:hover { border-color: rgba(255, 255, 255, 0.3); background: none; }
+
+.user-menu-header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 14px 8px;
+}
+.user-menu-uname { font-weight: 600; font-size: 0.9em; color: var(--text); }
+.user-menu-role { font-size: 0.75em; color: var(--text-dim); text-transform: capitalize; }
+
+.user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
+
+.user-menu-section-label {
+  padding: 6px 14px 2px;
+  font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-dim); font-weight: 600;
+}
+
+.user-menu-item {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; padding: 8px 14px;
+  background: none; border: none; border-radius: 0;
+  color: var(--text); font-size: 0.85em;
+  cursor: pointer; text-align: left;
+}
+.user-menu-item:hover { background: var(--bg-raised); }
+.user-menu-logout { color: var(--error); }
+
+.umi-icon { width: 18px; text-align: center; font-size: 0.95em; flex-shrink: 0; }
+.umi-arrow { margin-left: auto; font-size: 0.7em; color: var(--text-dim); }
+.umi-check { margin-left: auto; color: var(--accent); font-size: 0.85em; }
+.user-menu-sub { padding-left: 32px; }
 
 .nav-btn {
   background: rgba(255, 255, 255, 0.1);
@@ -289,14 +350,17 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border-radius: 12px;
   font-size: 0.75em;
 }
+.badge-ok { background: #16a34a20; color: var(--success); }
+.badge-err { background: var(--error-bg); color: var(--error); }
 
 /* ── Group page header ───────────────────────────────────────────────────── */
 
 .group-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
   margin-bottom: 16px;
+  flex-wrap: wrap;
 }
 .group-header h2 { margin-bottom: 0; }
 
@@ -688,8 +752,10 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .chat-bubble-own .chat-att-size { color: rgba(255, 255, 255, 0.6); }
 
+.file-menu button { display: flex; align-items: center; gap: 8px; }
 .file-menu button.danger { color: var(--error); }
 .file-menu button.danger:hover { background: var(--error-bg); }
+.fmi { font-size: 0.9em; width: 16px; text-align: center; flex-shrink: 0; }
 
 /* ── Download button + progress ──────────────────────────────────────────── */
 
@@ -1228,3 +1294,105 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: var(--text-secondary);
   white-space: nowrap;
 }
+
+/* ── Create Group page ───────────────────────────────────────────────────── */
+
+.create-group-page {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+}
+
+.create-group-card {
+  width: 100%;
+  max-width: 520px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 32px;
+  box-shadow: var(--shadow);
+}
+
+.create-group-header { margin-bottom: 24px; }
+.create-group-header h2 { margin-bottom: 8px; font-size: 1.3em; }
+.create-group-hint {
+  color: var(--text-secondary);
+  font-size: 0.88em;
+  line-height: 1.5;
+}
+
+.form-field { margin-bottom: 20px; }
+.form-label {
+  display: block;
+  font-size: 0.82em;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.option-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+.option-card {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 14px 10px;
+  background: var(--bg-base);
+  border: 2px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: center;
+  transition: border-color 0.12s, background 0.12s;
+}
+.option-card:hover { border-color: var(--accent); background: var(--bg-base); }
+.option-card.selected {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg-base));
+}
+
+.option-icon { font-size: 1.5em; margin-bottom: 2px; }
+.option-title { font-weight: 600; font-size: 0.9em; color: var(--text); }
+.option-desc { font-size: 0.75em; color: var(--text-dim); line-height: 1.3; }
+
+.create-group-submit {
+  width: 100%;
+  padding: 12px;
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: 8px;
+  border-radius: 8px;
+}
+
+.form-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-base);
+  color: var(--text);
+  font-size: 0.95em;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 60px;
+  line-height: 1.5;
+}
+.form-textarea:focus { outline: none; border-color: var(--border-focus); }
+.form-char-count { text-align: right; font-size: 0.75em; color: var(--text-dim); margin-top: 4px; }
+
+.group-desc {
+  font-size: 0.85em;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+.group-card-desc {
+  font-size: 0.8em;
+  color: var(--text-dim);
+  line-height: 1.3;
+  margin: 4px 0 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}