@bitpub/cli 2.1.2 → 2.1.4

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>