@bitpub/cli 2.1.3 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitpub/cli",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "BitPub CLI — local-first shared memory for AI agents. Six daily verbs (save/load/list/find/sync/delete), zero-config private namespace, encrypted client-side.",
   "bin": {
     "bitpub": "./bin/bitpub.js"

package/src/commands/browser.js

@@ -22,6 +22,7 @@ const { readConfig, BITPUB_DIR } = require('../config');
 const { getSyncedNamespaces, initCache } = require('../db/cache');
 const { isPrivateHcu, decrypt, isEncrypted } = require('../crypto');
 const { runOneShot: runSyncOneShot } = require('./sync');
+const { _internals: groupInternals } = require('./group');
 
 const Database = require('better-sqlite3');
 const DB_PATH = path.join(os.homedir(), '.bitpub', 'cache.db');
@@ -489,6 +490,149 @@ function handleBridgeSync(req, res) {
   });
 }
 
+/* ── Groups (browser chrome) ─────────────────────────────────────
+ *
+ * Three small JSON endpoints that back the "Make a group" / "Your
+ * groups" UI in the Welcome slice (and anywhere else in the browser
+ * chrome that wants to read/write group membership).
+ *
+ * Like /bridge/sync, this lives outside the manifest/apps system —
+ * group management is part of the browser shell itself, not something
+ * a user-published app should be able to do unprompted.
+ *
+ * Wire format:
+ *   POST /bridge/group/create  { display }
+ *     → { ok, group: { slug, display, hosted_on, base_url, role, joined_at }, invite_url }
+ *
+ *   GET  /bridge/group/list
+ *     → { ok, groups: [{ slug, display, address, role, joined_at, api_url }] }
+ *
+ *   POST /bridge/group/invite  { slug, rotate }
+ *     rotate=false (default) → GET the current active invite from the
+ *                              server (server is source of truth);
+ *                              returns { invite_url, rotated: false }.
+ *                              invite_url is null if every invite has
+ *                              been revoked and not yet replaced.
+ *     rotate=true  → POST a new invite (invalidates the prior one);
+ *                              returns { invite_url, rotated: true }.
+ *
+ * No local invite-URL caching: every read is a live server call. Group
+ * operations require network connectivity by design (create/join/leave
+ * all hit the server), so making the read path also network-bound is
+ * consistent and avoids sync hazards (rotate from machine A, stale
+ * cache on machine B).
+ */
+function jsonBody(req) {
+  return new Promise((resolve, reject) => {
+    let buf = '';
+    req.setEncoding('utf-8');
+    req.on('data', (c) => {
+      buf += c;
+      // Reject oversized bodies early — group endpoints take small JSON only.
+      if (buf.length > 16 * 1024) { reject(new Error('body too large')); req.destroy(); }
+    });
+    req.on('end', () => {
+      if (!buf) return resolve({});
+      try { resolve(JSON.parse(buf)); }
+      catch (err) { reject(new Error(`invalid JSON: ${err.message}`)); }
+    });
+    req.on('error', reject);
+  });
+}
+
+function sendJson(res, status, payload) {
+  res.statusCode = status;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(payload));
+}
+
+async function handleBridgeGroupCreate(req, res) {
+  let body;
+  try { body = await jsonBody(req); }
+  catch (err) { return sendJson(res, 400, { ok: false, error: err.message }); }
+
+  const display = String((body && body.display) || '').trim();
+  if (!display)               return sendJson(res, 400, { ok: false, error: 'display name required' });
+  if (display.length > 80)    return sendJson(res, 400, { ok: false, error: 'display name too long (max 80 chars)' });
+
+  try {
+    // createGroup itself caches invite_url locally (see group.js) so
+    // we don't need to do it here too.
+    const out = await groupInternals.createGroup(display);
+    sendJson(res, 200, {
+      ok: true,
+      group: {
+        slug: out.slug,
+        display: out.display,
+        hosted_on: out.hosted_on || null,
+        base_url: out.base_url || null,
+        role: 'owner',
+      },
+      invite_url: out.invite_url || null,
+    });
+  } catch (err) {
+    const msg = (err && err.message) || String(err);
+    sendJson(res, 500, { ok: false, error: msg });
+  }
+}
+
+function handleBridgeGroupList(_req, res) {
+  const cfg = readConfig() || {};
+  const groups = Array.isArray(cfg.groups) ? cfg.groups : [];
+  const out = groups.map((g) => ({
+    slug: g.slug,
+    display: g.display || g.slug,
+    address: `bitpub://group:${g.slug}/`,
+    role: g.role || null,
+    joined_at: g.joined_at || null,
+    api_url: g.api_url || null,
+  }));
+  sendJson(res, 200, { ok: true, groups: out });
+}
+
+async function handleBridgeGroupInvite(req, res) {
+  let body;
+  try { body = await jsonBody(req); }
+  catch (err) { return sendJson(res, 400, { ok: false, error: err.message }); }
+
+  const slug = String((body && body.slug) || '').trim();
+  const rotate = !!(body && body.rotate);
+  if (!slug) return sendJson(res, 400, { ok: false, error: 'slug required' });
+
+  try {
+    if (rotate) {
+      const out = await groupInternals.rotateInvite(slug);
+      return sendJson(res, 200, {
+        ok: true,
+        invite_url: out.invite_url,
+        rotated: true,
+      });
+    }
+    // Read path — server is the source of truth (GET /v1/groups/:slug/invites).
+    // Returns { invite_url: null } if every invite has been revoked.
+    const out = await groupInternals.showInvite(slug);
+    sendJson(res, 200, {
+      ok: true,
+      invite_url: out.invite_url || null,
+      rotated: false,
+    });
+  } catch (err) {
+    const raw = (err && err.message) || String(err);
+    // httpJson wraps upstream errors as "[STATUS] message". Pluck the
+    // status so we can return a matching HTTP code, and strip the
+    // prefix from the message so the UI renders just the human part.
+    const m = /^\[(\d{3})\]\s*(.*)$/.exec(raw);
+    const status = m ? Number(m[1]) : 500;
+    let message = m ? m[2] : raw;
+    if (status === 404 && /not found/i.test(message)) {
+      // Most common reason today: the running backend hasn't shipped
+      // GET /v1/groups/:slug/invites yet. Make that diagnosable.
+      message = 'This backend does not support reading invites (upgrade required).';
+    }
+    sendJson(res, status, { ok: false, error: message });
+  }
+}
+
 function openInBrowser(url) {
   const cmd = process.platform === 'darwin' ? 'open' :
     process.platform === 'win32' ? 'start' : 'xdg-open';
@@ -545,15 +689,34 @@ function startBrowserServer(opts = {}) {
 
       if (url.pathname === '/api/data') {
         res.setHeader('Content-Type', 'application/json');
+        // Re-read the config on every /api/data hit. The captured
+        // `cfg` above is set once at server start, but groups (and
+        // other config) can change mid-session — e.g. after the
+        // Welcome UI calls /bridge/group/create. Without this we'd
+        // serve a stale known_groups list and the new group wouldn't
+        // show in the sidebar until the user restarted `bitpub
+        // browser`. We fall back to the boot cfg for the key/domain
+        // fields, which don't change at runtime.
+        const liveCfg = readConfig() || cfg || {};
         const slices = getAllSlices().map(s => {
           if (cfg && cfg.api_key) return decryptSlice(s, cfg.api_key);
           return s;
         });
+        // known_groups: every group in the user's local config, even
+        // groups that contain zero slices yet. Lets the sidebar tree
+        // render a freshly-created group address as an empty top-level
+        // node — without this, `bitpub group create` would succeed
+        // but nothing visible would change until the first slice
+        // landed under that namespace.
+        const knownGroups = Array.isArray(liveCfg.groups)
+          ? liveCfg.groups.map((g) => ({ slug: g.slug, display: g.display || g.slug }))
+          : [];
         res.end(JSON.stringify({
           mode: 'local',
           domain: (cfg && cfg.domain) || '',
           slices,
           synced_namespaces: getSyncedNamespaces(),
+          known_groups: knownGroups,
         }));
         return;
       }
@@ -601,6 +764,21 @@ function startBrowserServer(opts = {}) {
         return;
       }
 
+      // Bridge: group management for the Welcome UI (create, list,
+      // invite). Same chrome-not-app reasoning as /bridge/sync.
+      if (url.pathname === '/bridge/group/create' && req.method === 'POST') {
+        handleBridgeGroupCreate(req, res);
+        return;
+      }
+      if (url.pathname === '/bridge/group/list' && req.method === 'GET') {
+        handleBridgeGroupList(req, res);
+        return;
+      }
+      if (url.pathname === '/bridge/group/invite' && req.method === 'POST') {
+        handleBridgeGroupInvite(req, res);
+        return;
+      }
+
       // Bridge: deterministic namespace read. Apps call this to fetch
       // any slices that match an HCU pattern (exact or prefix-with-/*).
       // No LLM, no MCP, no auth in the loop — this is the read path

package/src/commands/group.js

@@ -99,6 +99,12 @@ async function createGroup(display) {
   // the right backend with the same personal key (creator stays on
   // their own key; the per-group-key mint happens at *accept* time, not
   // create time, since the creator already has a key on this backend).
+  //
+  // We deliberately do NOT cache invite_url here. The server is the
+  // source of truth — `bitpub group invite <slug> --show` (and the
+  // browser-chrome `/bridge/group/invite` endpoint) re-fetch it via
+  // `listInvites` below whenever needed. Caching it would just be a
+  // sync hazard (rotate from another machine, lose the cache, etc.).
   upsertGroupEntry({
     slug: data.slug,
     display: data.display,
@@ -112,6 +118,23 @@ async function createGroup(display) {
   return { ...data, invite_url: data.invite_url, base_url: baseUrl };
 }
 
+// ── group invite show (read current invite from the server) ────────────────
+
+async function showInvite(slug) {
+  const config = requireConfig();
+  const entry = groupEntryFor(config, slug);
+  if (!entry) {
+    throw new Error(`Not a member of group "${slug}". Run \`bitpub group list\` to see your groups.`);
+  }
+  const baseUrl = trimSlash(entry.api_url) || primaryApiUrl(config);
+  // GET /v1/groups/:slug/invites returns the current active invite for
+  // members. Server is the source of truth — we don't cache.
+  const data = await httpJson('GET', `${baseUrl}/v1/groups/${encodeURIComponent(slug)}/invites`, {
+    headers: { 'x-api-key': entry.key },
+  });
+  return data; // { slug, display, invite_url, created_at }
+}
+
 // ── group list ─────────────────────────────────────────────────────────────
 
 async function listGroupsLocal() {
@@ -128,7 +151,10 @@ async function rotateInvite(slug, { show } = {}) {
     throw new Error(`Not a member of group "${slug}". Run \`bitpub group list\` to see your groups.`);
   }
   if (show) {
-    throw new Error('--show is not yet implemented (server does not expose the current token to non-creators by design). Use `bitpub group invite <slug>` to rotate and get a fresh URL.');
+    // `--show` reads the current invite without rotating. Implemented
+    // by GET /v1/groups/:slug/invites (members-only) above; same
+    // endpoint the Welcome UI's lazy "Copy invite link" calls.
+    return showInvite(slug);
   }
   const baseUrl = trimSlash(entry.api_url) || primaryApiUrl(config);
   const data = await httpJson('POST', `${baseUrl}/v1/groups/${encodeURIComponent(slug)}/invites`, {
@@ -259,11 +285,21 @@ module.exports = function registerGroup(program) {
 
   group
     .command('invite <slug>')
-    .description('Rotate the shareable invite link for a group')
-    .option('--show', '[not yet implemented] Show the current link without rotating it')
+    .description('Show or rotate the shareable invite link for a group')
+    .option('--show', 'Show the current link without rotating it (read-only)')
     .action(async (slug, opts) => {
       try {
         const out = await rotateInvite(slug, opts);
+        if (opts.show) {
+          if (out.invite_url) {
+            console.log(`\n  Share link for ${out.display || out.slug}:`);
+            console.log(`    ${out.invite_url}`);
+          } else {
+            console.log(`\n  No active invite link for ${out.display || out.slug}.`);
+            console.log(`  Mint one:  bitpub group invite ${out.slug}`);
+          }
+          return;
+        }
         console.log(`\n✓ Rotated invite for ${out.display || out.slug}`);
         console.log(`\n  New share link:`);
         console.log(`    ${out.invite_url}`);
@@ -329,5 +365,6 @@ module.exports._internals = {
   createGroup,
   joinFromInvite,
   rotateInvite,
+  showInvite,
   leaveGroup,
 };

package/static/console.html

@@ -1017,6 +1017,7 @@ const S = {
   stats: {},
   mode: 'remote',
   domain: '',
+  knownGroups: [],
   apiKey: sessionStorage.getItem('bitpub_key'),
   raw: false,
   searchQuery: '',
@@ -1205,7 +1206,8 @@ function ingestData(data) {
   S.slices = data.slices.map(parseSlice);
   S.mode = data.mode || 'remote';
   S.domain = data.domain || '';
-  S.tree = buildTree(S.slices);
+  S.knownGroups = Array.isArray(data.known_groups) ? data.known_groups : [];
+  S.tree = buildTree(S.slices, S.knownGroups);
   S.stats = computeStats(S.slices);
   S.lastUpdated = maxTs(S.slices);
 }
@@ -1254,7 +1256,8 @@ async function pollData() {
 
   S.slices = nextSlices;
   S.mode = data.mode || S.mode;
-  S.tree = buildTree(S.slices);
+  S.knownGroups = Array.isArray(data.known_groups) ? data.known_groups : S.knownGroups;
+  S.tree = buildTree(S.slices, S.knownGroups);
   S.stats = computeStats(S.slices);
   S.lastUpdated = maxTs(S.slices);
   S.newArrivals = arrivals;
@@ -1345,7 +1348,7 @@ function pathOf(hcu) {
   return (m && m[1]) ? m[1].replace(/^\//, '').split('/') : [];
 }
 
-function buildTree(slices) {
+function buildTree(slices, knownGroups) {
   const tree = {};
   for (const s of slices) {
     const { scope, type } = scopeOf(s.hcu);
@@ -1358,6 +1361,17 @@ function buildTree(slices) {
       if (i === segs.length - 1) node.slice = s;
     }
   }
+  // Seed empty top-level nodes for groups the user belongs to but
+  // hasn't put any slices in yet. The tree is otherwise slice-driven,
+  // so brand-new groups would be invisible in the sidebar until the
+  // first save — confusing right after `bitpub group create`.
+  if (Array.isArray(knownGroups)) {
+    for (const g of knownGroups) {
+      if (!g || !g.slug) continue;
+      const scope = `group:${g.slug}`;
+      if (!tree[scope]) tree[scope] = { type: 'group', children: {}, count: 0 };
+    }
+  }
   return tree;
 }
 
@@ -1592,7 +1606,8 @@ async function runFullSync() {
         if (!oldKey.has(k)) arrivals.add(s.hcu);
       }
       S.slices = nextSlices;
-      S.tree = buildTree(S.slices);
+      S.knownGroups = Array.isArray(data.known_groups) ? data.known_groups : S.knownGroups;
+      S.tree = buildTree(S.slices, S.knownGroups);
       S.stats = computeStats(S.slices);
       S.lastUpdated = maxTs(S.slices);
       S.newArrivals = arrivals;
@@ -2798,6 +2813,23 @@ const BRIDGE_SHIM_SOURCE = String.raw`
         private_prefix: d.private_prefix,
       });
       else ih.reject(new Error(d.error || 'identity lookup failed'));
+    } else if (d.type === 'bitpub.groups.result') {
+      var gh = readHandlers.get(d.requestId);
+      if (!gh) return;
+      readHandlers.delete(d.requestId);
+      if (d.ok) {
+        // Three response shapes share one event for symmetry with how
+        // the parent router replies. Callers just see their op's keys.
+        var payload = {};
+        if (typeof d.group     !== 'undefined') payload.group       = d.group;
+        if (typeof d.invite_url!== 'undefined') payload.invite_url  = d.invite_url;
+        if (typeof d.groups    !== 'undefined') payload.groups      = d.groups;
+        if (typeof d.rotated   !== 'undefined') payload.rotated     = d.rotated;
+        if (typeof d.needs_rotate !== 'undefined') payload.needs_rotate = d.needs_rotate;
+        gh.resolve(payload);
+      } else {
+        gh.reject(new Error(d.error || 'groups op failed'));
+      }
     }
   });
   window.bitpub = {
@@ -2879,6 +2911,69 @@ const BRIDGE_SHIM_SOURCE = String.raw`
           }, 5000);
         });
       }
+    },
+    groups: {
+      // Group management (browser chrome — backed by the local CLI's
+      // bridge endpoints, not the manifest/apps system). Available to
+      // any slice the parent has agreed to render; the user already
+      // trusts these endpoints by running 'bitpub browser'.
+      //
+      //   create(display)      -> Promise of { group, invite_url }
+      //   list()               -> Promise of { groups }
+      //   invite(slug, opts)   -> Promise of { invite_url, rotated, needs_rotate }
+      //                          opts.rotate=true rotates server-side
+      //                          (invalidates any link teammates hold).
+      create: function (display) {
+        return new Promise(function (resolve, reject) {
+          var requestId = ++nextId;
+          readHandlers.set(requestId, { resolve: resolve, reject: reject });
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.groups.create',
+            requestId: requestId,
+            display: String(display || ''),
+          }, '*');
+          setTimeout(function () {
+            if (!readHandlers.has(requestId)) return;
+            readHandlers.delete(requestId);
+            reject(new Error('groups.create timed out'));
+          }, 30000);
+        });
+      },
+      list: function () {
+        return new Promise(function (resolve, reject) {
+          var requestId = ++nextId;
+          readHandlers.set(requestId, { resolve: resolve, reject: reject });
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.groups.list',
+            requestId: requestId,
+          }, '*');
+          setTimeout(function () {
+            if (!readHandlers.has(requestId)) return;
+            readHandlers.delete(requestId);
+            reject(new Error('groups.list timed out'));
+          }, 5000);
+        });
+      },
+      invite: function (slug, opts) {
+        return new Promise(function (resolve, reject) {
+          var requestId = ++nextId;
+          readHandlers.set(requestId, { resolve: resolve, reject: reject });
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.groups.invite',
+            requestId: requestId,
+            slug: String(slug || ''),
+            rotate: !!(opts && opts.rotate),
+          }, '*');
+          setTimeout(function () {
+            if (!readHandlers.has(requestId)) return;
+            readHandlers.delete(requestId);
+            reject(new Error('groups.invite timed out'));
+          }, 30000);
+        });
+      }
     }
   };
 })();
@@ -3173,6 +3268,89 @@ async function handleBridgeNamespaceListMessage(source, msg) {
   }
 }
 
+async function handleBridgeGroupsMessage(source, msg) {
+  // Three ops share one reply event for symmetry with the iframe-side
+  // dispatcher. Each op posts whatever subset of keys the caller asked
+  // for; the shim unpacks them.
+  const { requestId, type } = msg;
+  if (typeof requestId !== 'number') return;
+  const reply = (extra) => {
+    try {
+      source.postMessage({
+        __bitpub: true,
+        type: 'bitpub.groups.result',
+        requestId,
+        ...extra,
+      }, '*');
+    } catch (_) { /* iframe gone */ }
+  };
+
+  try {
+    if (type === 'bitpub.groups.create') {
+      const r = await fetch('/bridge/group/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ display: msg.display || '' }),
+      });
+      const body = await r.json();
+      if (!r.ok || !body.ok) {
+        reply({ ok: false, error: (body && body.error) || `http ${r.status}` });
+        return;
+      }
+      // The new group will appear in the local config; refresh the
+      // sidebar tree so it shows up alongside any existing namespaces.
+      // We refetch /api/data immediately (rather than waiting for the
+      // 30s poll) and re-run buildTree so the empty group node lands
+      // in the sidebar.
+      (async () => {
+        try {
+          const fresh = await fetchData({ silent: true });
+          if (!fresh) return;
+          S.slices = fresh.slices.map(parseSlice);
+          S.knownGroups = Array.isArray(fresh.known_groups) ? fresh.known_groups : S.knownGroups;
+          S.tree = buildTree(S.slices, S.knownGroups);
+          S.stats = computeStats(S.slices);
+          renderAll();
+        } catch (_) { /* poll will catch up */ }
+      })();
+      reply({ ok: true, group: body.group, invite_url: body.invite_url });
+      return;
+    }
+    if (type === 'bitpub.groups.list') {
+      const r = await fetch('/bridge/group/list');
+      const body = await r.json();
+      if (!r.ok || !body.ok) {
+        reply({ ok: false, error: (body && body.error) || `http ${r.status}` });
+        return;
+      }
+      reply({ ok: true, groups: body.groups || [] });
+      return;
+    }
+    if (type === 'bitpub.groups.invite') {
+      const r = await fetch('/bridge/group/invite', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ slug: msg.slug || '', rotate: !!msg.rotate }),
+      });
+      const body = await r.json();
+      if (!r.ok || !body.ok) {
+        reply({ ok: false, error: (body && body.error) || `http ${r.status}` });
+        return;
+      }
+      reply({
+        ok: true,
+        invite_url: body.invite_url || null,
+        rotated: !!body.rotated,
+        needs_rotate: !!body.needs_rotate,
+      });
+      return;
+    }
+    reply({ ok: false, error: `unknown groups op: ${type}` });
+  } catch (err) {
+    reply({ ok: false, error: (err && err.message) || 'fetch failed' });
+  }
+}
+
 async function handleBridgeIdentityMessage(source, msg) {
   const { requestId } = msg;
   if (typeof requestId !== 'number') return;
@@ -3212,6 +3390,9 @@ window.addEventListener('message', (e) => {
   if (d.type === 'bitpub.run') handleBridgeRunMessage(e.source, d);
   else if (d.type === 'bitpub.namespace.list') handleBridgeNamespaceListMessage(e.source, d);
   else if (d.type === 'bitpub.identity.me') handleBridgeIdentityMessage(e.source, d);
+  else if (d.type === 'bitpub.groups.create' ||
+           d.type === 'bitpub.groups.list'   ||
+           d.type === 'bitpub.groups.invite') handleBridgeGroupsMessage(e.source, d);
   else if (d.type === 'bitpub.navigate' || d.type === 'navigate') handleBridgeNavigateMessage(e.source, d);
 });
 

package/static/welcome.html

@@ -340,6 +340,331 @@
     details.recipe pre .p { color: #7c9d7a; }
     details.recipe pre .n { color: #b5a5ff; }
 
+    /* ─── Team / Groups section ─────────────────────────────
+       Dedicated component that lets the user create a group and
+       see the ones they're already in — no terminal commands.
+       The card mirrors the visual language of .meta-card so it
+       reads as "a serious thing, not a hint." Form + list live
+       inside the same card because the empty state ("no groups
+       yet") is itself a teaching moment about why groups exist. */
+    .team-card {
+      margin: 8px 0 52px;
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      padding: 28px 30px 24px;
+      box-shadow: var(--shadow-1);
+    }
+    .team-card .team-hd { margin-bottom: 18px; }
+    .team-card .team-eyebrow {
+      display: inline-block;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: .06em;
+      text-transform: uppercase;
+      color: var(--accent);
+      background: var(--accent-bg);
+      padding: 3px 9px;
+      border-radius: 999px;
+      margin-bottom: 12px;
+    }
+    .team-card h2 {
+      font-family: var(--display);
+      font-size: 26px;
+      font-weight: 600;
+      letter-spacing: -.02em;
+      line-height: 1.2;
+      color: var(--text);
+      margin-bottom: 10px;
+    }
+    .team-card .lede-2 {
+      font-size: 14.5px;
+      color: var(--muted);
+      line-height: 1.6;
+      max-width: 64ch;
+    }
+    .team-card .lede-2 b { color: var(--text); font-weight: 600; }
+
+    /* Create form */
+    .team-form {
+      display: flex;
+      gap: 10px;
+      margin-top: 22px;
+      padding: 14px;
+      background: var(--inset-2);
+      border: 1px solid var(--line);
+      border-radius: var(--radius-sm);
+    }
+    .team-form input[type="text"] {
+      flex: 1;
+      min-width: 0;
+      padding: 10px 12px;
+      background: var(--card);
+      border: 1px solid var(--line-2);
+      border-radius: var(--radius-xs);
+      font: inherit;
+      font-size: 14px;
+      color: var(--text);
+      transition: border-color .15s ease, box-shadow .15s ease;
+    }
+    .team-form input[type="text"]:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-bg);
+    }
+    .team-form input[type="text"]::placeholder { color: var(--faint); }
+    .team-form input[type="text"]:disabled {
+      opacity: .6; cursor: not-allowed;
+      background: var(--inset);
+    }
+    .btn-primary {
+      padding: 10px 18px;
+      background: var(--accent);
+      color: white;
+      border: 0;
+      border-radius: var(--radius-xs);
+      font: inherit;
+      font-size: 13.5px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background .15s ease, transform .1s ease;
+      white-space: nowrap;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .btn-primary:hover { background: var(--accent-2); }
+    .btn-primary:active { transform: translateY(1px); }
+    .btn-primary:disabled {
+      opacity: .55; cursor: not-allowed; transform: none; background: var(--accent);
+    }
+    .btn-primary .spinner {
+      width: 12px; height: 12px;
+      border: 2px solid rgba(255,255,255,.35);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin .6s linear infinite;
+      display: none;
+    }
+    .btn-primary.busy .spinner { display: inline-block; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .team-error {
+      margin-top: 12px;
+      padding: 10px 12px;
+      background: rgba(229, 87, 70, .08);
+      border: 1px solid rgba(229, 87, 70, .25);
+      color: #b3392a;
+      border-radius: var(--radius-xs);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+    .team-error.hidden { display: none; }
+
+    /* Groups list */
+    .team-list-h {
+      display: flex;
+      align-items: baseline;
+      gap: 10px;
+      margin: 28px 0 12px;
+      padding-top: 22px;
+      border-top: 1px solid var(--line);
+    }
+    .team-list-h h3 {
+      font-family: var(--display);
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text);
+      letter-spacing: -.005em;
+    }
+    .team-list-h .count {
+      font-size: 12px;
+      color: var(--subtle);
+    }
+    .team-list { display: flex; flex-direction: column; gap: 10px; }
+    .team-empty {
+      padding: 18px 16px;
+      background: var(--inset-2);
+      border: 1px dashed var(--line-2);
+      border-radius: var(--radius-sm);
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.55;
+      text-align: center;
+    }
+    .group-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 14px;
+      align-items: start;
+      padding: 14px 16px;
+      background: var(--inset-2);
+      border: 1px solid var(--line);
+      border-radius: var(--radius-sm);
+      transition: background .15s ease;
+    }
+    .group-row.is-new {
+      background: var(--accent-bg);
+      border-color: rgba(255, 71, 26, .25);
+      animation: groupArrive .8s ease both;
+    }
+    @keyframes groupArrive { from { transform: scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
+    .group-row .info { min-width: 0; }
+    .group-row .name {
+      font-family: var(--display);
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text);
+      margin-bottom: 2px;
+    }
+    .group-row .role {
+      display: inline-block;
+      margin-left: 8px;
+      font-size: 10.5px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: .04em;
+      padding: 1px 6px;
+      border-radius: 4px;
+      background: var(--inset);
+      color: var(--subtle);
+      vertical-align: 2px;
+    }
+    .group-row .role.owner {
+      background: var(--accent-bg);
+      color: var(--accent);
+    }
+    .group-row .addr {
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--muted);
+      word-break: break-all;
+      line-height: 1.5;
+    }
+    .group-row .actions-row {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    .btn-ghost {
+      padding: 6px 10px;
+      background: var(--card);
+      border: 1px solid var(--line-2);
+      border-radius: var(--radius-xs);
+      font: inherit;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--muted);
+      cursor: pointer;
+      transition: background .15s ease, color .15s ease, border-color .15s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .btn-ghost:hover {
+      background: var(--inset);
+      color: var(--text);
+      border-color: var(--line-2);
+    }
+    .btn-ghost.copied {
+      background: var(--ok-bg);
+      color: var(--ok);
+      border-color: rgba(42,157,110,.3);
+    }
+    .btn-ghost svg { width: 12px; height: 12px; }
+    .btn-ghost.danger:hover {
+      background: rgba(229, 87, 70, .08);
+      color: #b3392a;
+      border-color: rgba(229, 87, 70, .25);
+    }
+
+    .invite-banner {
+      grid-column: 1 / -1;
+      margin-top: 10px;
+      padding: 12px;
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xs);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .invite-banner .invite-url {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text);
+      background: var(--inset-2);
+      padding: 8px 10px;
+      border-radius: var(--radius-xs);
+      border: 1px solid var(--line);
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+    .invite-banner .row {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+    .invite-banner .row .invite-url { margin: 0; }
+    .invite-banner .rotate-link {
+      align-self: flex-start;
+      background: none;
+      border: 0;
+      padding: 0;
+      font: inherit;
+      font-size: 11.5px;
+      color: var(--subtle);
+      cursor: pointer;
+      text-decoration: underline dotted;
+      text-underline-offset: 3px;
+    }
+    .invite-banner .rotate-link:hover { color: var(--text); }
+
+    /* Terminal-style ephemeral "fetching..." indicator that flashes
+       in place of the invite button while the bridge does its server
+       round-trip. Makes the network step visible without being noisy. */
+    .term-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      background: #1e1a19;
+      color: #e8e2dc;
+      border-radius: var(--radius-xs);
+      font-family: var(--mono);
+      font-size: 11.5px;
+      line-height: 1;
+      box-shadow: var(--shadow-1);
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 100%;
+    }
+    .term-pill .term-prompt { color: var(--accent); }
+    .term-pill .term-cmd { color: #e8e2dc; }
+    .term-pill .term-result {
+      color: #7c9d7a; /* green for success */
+    }
+    .term-pill.is-error { background: #3a1816; }
+    .term-pill.is-error .term-result { color: #ff8266; }
+    .term-pill .term-dots {
+      display: inline-flex; gap: 3px;
+    }
+    .term-pill .term-dots span {
+      width: 4px; height: 4px;
+      background: #e8e2dc;
+      border-radius: 50%;
+      opacity: .3;
+      animation: termDot 1.1s infinite;
+    }
+    .term-pill .term-dots span:nth-child(2) { animation-delay: .15s; }
+    .term-pill .term-dots span:nth-child(3) { animation-delay: .3s; }
+    @keyframes termDot {
+      0%,80%,100% { opacity: .3; }
+      40%         { opacity: 1; }
+    }
+
     /* ─── Footnote ─────────────────────────────────────────── */
     .footnote {
       margin-top: 44px;
@@ -395,13 +720,51 @@
     </div>
   </div>
 
+  <!-- ═══════ Team / Groups ═══════
+       The group creation surface is its own dedicated component
+       rather than another copy-the-command card. The button below
+       is wired to window.bitpub.groups.create() (browser-chrome
+       bridge — deterministic, no LLM in the loop). The "Your
+       groups" list updates on success and persists across reloads. -->
+  <div class="team-card" id="team-card">
+    <div class="team-hd">
+      <span class="team-eyebrow">Your team workspace</span>
+      <h2>Create a group with your team</h2>
+      <p class="lede-2">
+        A group is a <b>shared namespace</b> &mdash; one address everyone on your team can read and write. No GitHub repos, no PRs, no email invites. You'll get a single link to share; teammates click it and they're in. Use a group for <b>team transcripts, shared apps, agents you want everyone to run, the running thread of context your team works against.</b>
+      </p>
+    </div>
+
+    <!-- Not a real <form>: the iframe sandbox is "allow-scripts" only
+         (no allow-forms), so form submission is blocked by the browser
+         and the submit event never fires. We listen on button-click +
+         Enter-in-input directly. -->
+    <div class="team-form" id="team-form">
+      <input type="text" id="team-name" placeholder="Name your team (e.g. Acme Engineering)"
+             maxlength="80" autocomplete="off">
+      <button class="btn-primary" type="button" id="team-create-btn">
+        <span class="spinner" aria-hidden="true"></span>
+        <span class="btn-label">Create group</span>
+      </button>
+    </div>
+    <div class="team-error hidden" id="team-error" role="alert"></div>
+
+    <div class="team-list-h">
+      <h3>Your groups</h3>
+      <span class="count" id="team-count">&mdash;</span>
+    </div>
+    <div class="team-list" id="team-list">
+      <div class="team-empty">Loading your groups&hellip;</div>
+    </div>
+  </div>
+
   <!-- ═══════ Actions ═══════ -->
   <div class="section-h">
-    <h2>Three things to try</h2>
+    <h2>Two things to try</h2>
     <span class="meta">each takes under a minute &middot; click to copy</span>
   </div>
 
-  <div class="actions">
+  <div class="actions" style="grid-template-columns: 1fr 1fr;">
 
     <!-- ── Card 1: look at your namespace ── -->
     <div class="action">
@@ -425,31 +788,9 @@
       </p>
     </div>
 
-    <!-- ── Card 2: create a group ── -->
+    <!-- ── Card 2: build an app with the agent you already have ── -->
     <div class="action">
       <div class="action-num">2</div>
-      <h3>Create a group with your team</h3>
-      <p>
-        Groups are shared namespaces. Members can read and write together. You'll get a shareable invite link to send your teammates &mdash; no GitHub, no email-invites, no PRs.
-      </p>
-      <div class="copy-block">
-<pre class="cmd"><span class="prompt">$ </span>bitpub group create yourcompany</pre>
-        <button class="copy-btn" type="button" data-copy="bitpub group create yourcompany">
-          <span class="label">
-            <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><path d="M3 2h6"/></svg>
-            Copy command
-          </span>
-          <span class="hint" aria-hidden="true">⌘V in terminal</span>
-        </button>
-      </div>
-      <p class="followup">
-        Then share the printed link. Teammates run <code>bitpub join &lt;link&gt;</code> and are in.
-      </p>
-    </div>
-
-    <!-- ── Card 3: build an app with the agent you already have ── -->
-    <div class="action">
-      <div class="action-num">3</div>
       <h3>Build an app with the agent you already have</h3>
       <p>
         Paste the prompt below into Claude Code, Cursor, or Codex. Your agent will write you a small HTML app and save it to your namespace. It'll render here, in this same window.
@@ -569,6 +910,345 @@
         labelEl.innerHTML = original;
       }, 1600);
     }
+
+    /* ─── Team / Groups wiring ─────────────────────────────────────
+       Uses the browser-chrome bridge (window.bitpub.groups.*) — same
+       trust boundary as the sidebar Sync button. The create button is
+       deterministic: one HTTP POST to /bridge/group/create.
+
+       Invite reads are LAZY — clicking "Copy invite link" hits the
+       server fresh every time via GET /v1/groups/:slug/invites (server
+       is the source of truth). No local caching, no stale-link
+       hazards. The intermediate "fetching..." pill is intentional UX:
+       group ops require network and we want that visible. */
+    const groupsApi = (window.bitpub && window.bitpub.groups) || null;
+
+    // Tracks the slug of the group just created in this page session so
+    // we can anchor its row at the top and highlight it. Cleared on
+    // reload — purely cosmetic, no data lives here.
+    let lastCreatedSlug = null;
+
+    function el(html) {
+      const t = document.createElement('template');
+      t.innerHTML = html.trim();
+      return t.content.firstChild;
+    }
+
+    function escapeHtml(s) {
+      return String(s == null ? '' : s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function showTeamError(msg) {
+      const e = document.getElementById('team-error');
+      if (!e) return;
+      e.textContent = msg || '';
+      e.classList.toggle('hidden', !msg);
+    }
+
+    async function loadGroups() {
+      const list = document.getElementById('team-list');
+      const count = document.getElementById('team-count');
+      if (!groupsApi) {
+        list.innerHTML = '<div class="team-empty">Group management isn\'t available in this context. Open this page inside the BitPub Browser to manage groups visually.</div>';
+        count.textContent = '';
+        return;
+      }
+      try {
+        const { groups = [] } = await groupsApi.list();
+        renderGroups(groups);
+      } catch (err) {
+        list.innerHTML = `<div class="team-empty">Could not load your groups: ${escapeHtml(err.message || String(err))}</div>`;
+        count.textContent = '';
+      }
+    }
+
+    function renderGroups(groups) {
+      const list = document.getElementById('team-list');
+      const count = document.getElementById('team-count');
+      count.textContent = groups.length === 0
+        ? 'none yet'
+        : (groups.length === 1 ? '1 group' : `${groups.length} groups`);
+
+      if (groups.length === 0) {
+        list.innerHTML = '<div class="team-empty">You\'re not in any groups yet. Create one above and you\'ll see it here, along with the invite link to send your teammates.</div>';
+        return;
+      }
+
+      // Sort: most-recently-joined first, freshly-created group pinned
+      // to the top so it lands in the user's first glance.
+      const sorted = groups.slice().sort((a, b) => {
+        if (a.slug === lastCreatedSlug) return -1;
+        if (b.slug === lastCreatedSlug) return 1;
+        return String(b.joined_at || '').localeCompare(String(a.joined_at || ''));
+      });
+
+      list.innerHTML = '';
+      for (const g of sorted) {
+        const isNew = g.slug === lastCreatedSlug;
+        const roleBadge = g.role === 'owner'
+          ? '<span class="role owner">owner</span>'
+          : (g.role ? `<span class="role">${escapeHtml(g.role)}</span>` : '');
+
+        // Same affordance for every row: "Copy invite link". Clicking
+        // does a lazy server GET, copies to clipboard, then shows the
+        // URL in a banner so the user can confirm what got copied.
+        const row = el(`<div class="group-row${isNew ? ' is-new' : ''}" data-slug="${escapeHtml(g.slug)}">
+          <div class="info">
+            <div class="name">${escapeHtml(g.display || g.slug)}${roleBadge}</div>
+            <div class="addr">${escapeHtml(g.address || `bitpub://group:${g.slug}/`)}</div>
+          </div>
+          <div class="actions-row">
+            <button class="btn-ghost open-btn" type="button" data-slug="${escapeHtml(g.slug)}" title="Open this group's namespace in the sidebar">
+              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2.5h5.5L9.5 3.5V9a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z"/></svg>
+              Open
+            </button>
+            <button class="btn-ghost copy-invite-btn" type="button" data-slug="${escapeHtml(g.slug)}" title="Fetch and copy this group's invite link (one network call)">
+              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><path d="M3 2h6"/></svg>
+              Copy invite link
+            </button>
+          </div>
+        </div>`);
+        list.appendChild(row);
+      }
+
+      list.querySelectorAll('.copy-invite-btn').forEach(btn => {
+        btn.addEventListener('click', () => copyInviteLazy(btn));
+      });
+      list.querySelectorAll('.open-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const slug = btn.getAttribute('data-slug');
+          if (!slug) return;
+          // Hand off to the parent BitPub Browser via the navigate
+          // bridge — same path the sidebar uses.
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.navigate',
+            hcu: `bitpub://group:${slug}/`,
+          }, '*');
+        });
+      });
+    }
+
+    /* Replace the button with a small terminal-style pill that shows
+       the command being run, hold there until the bridge resolves,
+       then either:
+         - success: drop the URL banner under the row, copy to clipboard,
+                    swap the pill back to a "Copy invite link" button
+                    so a second copy is one click away
+         - failure: turn the pill red with the error, restore the button
+                    after a few seconds */
+    async function copyInviteLazy(btn) {
+      const slug = btn.getAttribute('data-slug');
+      if (!slug || !groupsApi) return;
+      const row = btn.closest('.group-row');
+      if (!row) return;
+
+      // Drop any prior banner from a previous click — single source of
+      // truth per row.
+      const prior = row.querySelector('.invite-banner');
+      if (prior) prior.remove();
+
+      const cmd = `bitpub group invite ${slug} --show`;
+      const pill = el(`<span class="term-pill" role="status">
+        <span class="term-prompt">$</span>
+        <span class="term-cmd">${escapeHtml(cmd)}</span>
+        <span class="term-dots"><span></span><span></span><span></span></span>
+      </span>`);
+      btn.replaceWith(pill);
+
+      let result;
+      try {
+        result = await groupsApi.invite(slug, { rotate: false });
+      } catch (err) {
+        renderInviteError(pill, row, slug, err.message || 'fetch failed');
+        return;
+      }
+      if (!result || !result.invite_url) {
+        // Every invite has been revoked — surface as a non-fatal note
+        // and offer to mint a new one in the same gesture.
+        renderInviteEmpty(pill, row, slug);
+        return;
+      }
+
+      // Replace pill with the URL banner; copy to clipboard immediately.
+      const banner = renderInviteBanner(row, slug, result.invite_url);
+      pill.replaceWith(makeCopyAgainButton(slug));
+      const ok = await copyToClipboard(result.invite_url);
+      flashBannerCopied(banner, ok);
+    }
+
+    function makeCopyAgainButton(slug) {
+      const btn = el(`<button class="btn-ghost copy-invite-btn copied" type="button" data-slug="${escapeHtml(slug)}" title="Copy this invite link again">
+        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 6.5L5 9.5l5-6"/></svg>
+        Copied · click to re-fetch
+      </button>`);
+      btn.addEventListener('click', () => {
+        // Strip the "copied" state so a fresh click starts a fresh fetch.
+        btn.classList.remove('copied');
+        btn.innerHTML = '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><path d="M3 2h6"/></svg> Copy invite link';
+        copyInviteLazy(btn);
+      });
+      return btn;
+    }
+
+    function renderInviteBanner(row, slug, url) {
+      const banner = el(`<div class="invite-banner">
+        <div class="row">
+          <div class="invite-url" title="${escapeHtml(url)}">${escapeHtml(url)}</div>
+        </div>
+        <button class="rotate-link" type="button">Rotate this link (invalidates the URL above)</button>
+      </div>`);
+      banner.querySelector('.rotate-link').addEventListener('click', () => rotateLazy(slug, row));
+      row.appendChild(banner);
+      return banner;
+    }
+
+    function renderInviteEmpty(pill, row, slug) {
+      const note = el(`<div class="invite-banner">
+        <div class="row">
+          <div class="invite-url" style="color:var(--muted)">No active invite for this group — every prior link has been revoked.</div>
+        </div>
+        <button class="rotate-link" type="button">Mint a fresh invite link</button>
+      </div>`);
+      note.querySelector('.rotate-link').addEventListener('click', () => rotateLazy(slug, row));
+      pill.replaceWith(el(`<button class="btn-ghost copy-invite-btn" type="button" data-slug="${escapeHtml(slug)}"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><path d="M3 2h6"/></svg> Copy invite link</button>`));
+      // Re-wire the click on the restored button.
+      row.querySelector('.copy-invite-btn').addEventListener('click', (e) => copyInviteLazy(e.currentTarget));
+      row.appendChild(note);
+    }
+
+    function renderInviteError(pill, row, slug, message) {
+      pill.classList.add('is-error');
+      pill.innerHTML = `<span class="term-prompt">$</span><span class="term-cmd">bitpub group invite ${escapeHtml(slug)} --show</span><span class="term-result">→ ${escapeHtml(message)}</span>`;
+      // After a beat, restore the button so the user can retry.
+      setTimeout(() => {
+        const btn = el(`<button class="btn-ghost copy-invite-btn" type="button" data-slug="${escapeHtml(slug)}" title="Try fetching again"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><path d="M3 2h6"/></svg> Copy invite link</button>`);
+        btn.addEventListener('click', () => copyInviteLazy(btn));
+        pill.replaceWith(btn);
+      }, 4000);
+    }
+
+    function flashBannerCopied(banner, ok) {
+      const urlEl = banner.querySelector('.invite-url');
+      if (!urlEl) return;
+      const original = urlEl.style.borderColor;
+      urlEl.style.transition = 'border-color .2s ease, background .2s ease';
+      urlEl.style.borderColor = ok ? 'rgba(42,157,110,.5)' : 'rgba(229,87,70,.5)';
+      urlEl.style.background = ok ? 'var(--ok-bg)' : 'rgba(229,87,70,.08)';
+      setTimeout(() => {
+        urlEl.style.borderColor = original;
+        urlEl.style.background = '';
+      }, 900);
+    }
+
+    async function rotateLazy(slug, row) {
+      const ok = window.confirm(
+        'Generate a fresh invite link?\n\nThe link currently shown will stop working — anyone you haven\'t given the new one to will need it re-sent.'
+      );
+      if (!ok) return;
+      const banner = row.querySelector('.invite-banner');
+      // Show a terminal pill inside the banner while we rotate.
+      const note = banner.querySelector('.invite-url');
+      const original = note.outerHTML;
+      const pill = el(`<span class="term-pill" role="status">
+        <span class="term-prompt">$</span>
+        <span class="term-cmd">bitpub group invite ${escapeHtml(slug)}</span>
+        <span class="term-dots"><span></span><span></span><span></span></span>
+      </span>`);
+      note.replaceWith(pill);
+      try {
+        const r = await groupsApi.invite(slug, { rotate: true });
+        if (!r || !r.invite_url) throw new Error('server returned no invite_url');
+        const fresh = el(`<div class="invite-url" title="${escapeHtml(r.invite_url)}">${escapeHtml(r.invite_url)}</div>`);
+        pill.replaceWith(fresh);
+        await copyToClipboard(r.invite_url);
+        flashBannerCopied(banner, true);
+      } catch (err) {
+        pill.classList.add('is-error');
+        pill.innerHTML = `<span class="term-prompt">$</span><span class="term-cmd">bitpub group invite ${escapeHtml(slug)}</span><span class="term-result">→ ${escapeHtml(err.message || 'rotation failed')}</span>`;
+        setTimeout(() => {
+          const restored = el(original);
+          pill.replaceWith(restored);
+        }, 4000);
+      }
+    }
+
+    function setCreatingBusy(busy) {
+      const btn = document.getElementById('team-create-btn');
+      const input = document.getElementById('team-name');
+      if (busy) {
+        btn.classList.add('busy');
+        btn.disabled = true;
+        input.disabled = true;
+        btn.querySelector('.btn-label').textContent = 'Creating…';
+      } else {
+        btn.classList.remove('busy');
+        btn.disabled = false;
+        input.disabled = false;
+        btn.querySelector('.btn-label').textContent = 'Create group';
+      }
+    }
+
+    async function submitCreateGroup() {
+      showTeamError('');
+      const input = document.getElementById('team-name');
+      const display = (input.value || '').trim();
+      if (!display) {
+        showTeamError('Give your group a name first.');
+        input.focus();
+        return;
+      }
+      if (!groupsApi) {
+        showTeamError('Group management isn\'t available in this context.');
+        return;
+      }
+      setCreatingBusy(true);
+      try {
+        const { group, invite_url } = await groupsApi.create(display);
+        if (group && group.slug) lastCreatedSlug = group.slug;
+        input.value = '';
+        await loadGroups();
+        // The create response already includes the invite URL — show
+        // it under the new row without a second round-trip and copy
+        // it to clipboard so the user can paste it immediately.
+        if (group && group.slug && invite_url) {
+          const row = document.querySelector(
+            `.group-row[data-slug="${cssEscape(group.slug)}"]`
+          );
+          if (row) {
+            renderInviteBanner(row, group.slug, invite_url);
+            const ok = await copyToClipboard(invite_url);
+            flashBannerCopied(row.querySelector('.invite-banner'), ok);
+          }
+        }
+      } catch (err) {
+        showTeamError(err.message || 'Could not create group');
+      } finally {
+        setCreatingBusy(false);
+      }
+    }
+
+    function cssEscape(s) {
+      // Minimal CSS attribute-value escaper for our slug shape
+      // ([a-z0-9-]+). Real CSS.escape() exists in modern browsers but
+      // we keep this lightweight for older sandboxes.
+      return String(s).replace(/["\\]/g, '\\$&');
+    }
+
+    document.getElementById('team-create-btn').addEventListener('click', submitCreateGroup);
+    document.getElementById('team-name').addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); submitCreateGroup(); }
+    });
+
+    // Auto-load on mount. Tiny delay so the parent's bridge router
+    // has wired up before we start postMessage-ing — defensive only;
+    // the shim queues internally.
+    setTimeout(loadGroups, 50);
   </script>
 </body>
 </html>