feat(hub): name a group's host on its card, not its visibility

"private" and "invite" were on every card because they are the default for
every group on the hub — two badges that never varied and so never told
anyone anything. Who hosts a group does vary, and it is the thing that tells
two groups of the same name apart: the hub enforces name uniqueness per owner
account, not globally.

- The "My groups" cards (app.js) drop both badges and render the name through
  GroupName, which puts the owner beside it as a smaller "@handle" — the same
  way the group header and Explore already write it. "admin" stays; it varies.
  /v1/groups/mine already returns owner_username, so no API change.
- Explore drops its join_policy badge for the same reason. An open group still
  announces itself through the Join button, which is the useful half, and its
  @host was already there.
- .group-card h3 .gn-owner is set to 0.8em: a card's h3 is reset to 1em, so
  the 0.55em meant for a page heading rendered the handle at about half the
  body size — smaller than the name, as it should be, but past readable.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V8EDjk6pkYZrCbo63m2x87

3 files changed, 21 insertions, 7 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index c7e46d8..aa0034c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -20,6 +20,7 @@ import { MusicPlayerBar } from './music-player.js';
 import { SettingsPage } from './settings-page.js';
 import { ProfilePage } from './profile-page.js';
 import { ExplorePage } from './explore-page.js';
+import { GroupName } from './group-name.js';
 import { FirstRunPage, LoginPage, RegisterPage, ResetPasswordPage } from './auth-page.js';
 
 // ── Constants ────────────────────────────────────────────────────────────────
@@ -397,12 +398,17 @@ function HomePage({ groups, notifications, onMarkRead, onPurge, allowPublicGroup
       <div class="group-grid">
         ${groups.map(g => html`
           <a key=${g.id} class="group-card" href="#/group/${g.id}">
-            <h3>${g.name}</h3>
+            ${/* The host, not the visibility. "private" and "invite" were on
+                  every card because they are the default everywhere — two
+                  badges that never varied and so never told anyone anything.
+                  Who hosts a group does vary, and is the thing that tells two
+                  groups of the same name apart (the hub only enforces
+                  uniqueness per owner). GroupName renders it as a smaller
+                  @handle beside the name, which is how the group header and
+                  Explore already write it. "admin" stays: it does vary. */''}
+            <h3><${GroupName} name=${g.name} owner=${g.owner_username} /></h3>
             ${g.description && html`<p class="group-card-desc">${g.description}</p>`}
-            <span class="badge">${g.visibility}</span>
-            ${' '}
-            <span class="badge">${g.join_policy}</span>
-            ${g.is_admin && html`${' '}<span class="badge">admin</span>`}
+            ${g.is_admin && html`<span class="badge">admin</span>`}
           </a>
         `)}
       </div>
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/explore-page.js b/packages/meshbay-hub/src/meshbay_hub/static/explore-page.js
index 486c1e6..bb47487 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/explore-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/explore-page.js
@@ -78,8 +78,11 @@ export function ExplorePage({ token, myGroupIds, allowPublicGroups = true }) {
                       owner=${g.source && g.source !== 'local' ? g.source : g.owner_username} /></h3>
                     ${g.description && html`<p class="group-card-desc">${g.description}</p>`}
                   </a>
-                  <span class="badge">${g.join_policy}</span>
-                  ${' '}
+                  ${/* No join_policy badge: on a hub whose groups are all
+                        invite-only it read "invite" on every card. An open
+                        group still announces itself — with the Join button
+                        below, which is the useful half. The @host is already
+                        beside the name, via GroupName. */''}
                   ${isMember(g.id)
                     ? html`<span class="badge">${t('explore.member')}</span>`
                     : g.join_policy === 'open' && html`
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index a35137b..dfed44b 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2381,6 +2381,11 @@ a.transfer-name {
   flex-shrink: 0;
 }
 h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
+/* A card's h3 is reset to 1em (unlike a page heading, which is much larger),
+   so the 0.55em above would render the @host at about half the body size —
+   smaller than the name, as intended, but past the point of being readable.
+   0.8em is the same ratio the standalone .gn-owner uses. */
+.group-card h3 .gn-owner { font-size: 0.8em; }
 
 /* ── Chat: paging and orientation ─────────────────────────────────────────── */