feat(web): public /join/[token] page + https invite url

Clickable HTTPS invite URLs replace the raw ic://join/<token> as the
primary share format. Someone receiving a link in Slack now lands on
a friendly page with install instructions, not a dead-end.

Backend:
- createMyInvite returns a new joinUrl field
  (https://claudemesh.com/join/<token>) alongside the existing
  ic://join/<token> inviteLink and raw token. Schema + Hono route
  updated. ic:// scheme stays — CLI parses both.
- New GET /api/public/invite/:token in packages/api/src/modules/public/
  (unauthed). Decodes the base64url payload, verifies ed25519
  signature against owner_pubkey using the same canonicalInvite()
  contract the broker enforces on join, then joins mesh/invite/user
  to return the shape needed by the landing page. Does NOT mutate
  usedCount — this is a read-only preview.
- Error taxonomy: malformed | bad_signature | expired | revoked |
  exhausted | mesh_archived | not_found. Each returned with any
  metadata we CAN surface (meshName, inviterName, expiresAt) so the
  error page can be specific ("ask Jordan for a new one").
- cache-control: public max-age=30 on valid invites, no-store on
  errors (reasons flip as state changes).

Frontend:
- New public route /[locale]/join/[token] (no auth). Server
  Component fetches the preview endpoint, branches on valid/invalid,
  renders a minimal landing-design-language shell (wordmark header,
  clay accents, serif headlines, mono commands).
- Valid-invite view: "You're invited to {meshName}", inviter +
  role + member-count lede, install-toggle component.
- Invalid-invite view: per-reason error copy + inviter name when
  available + link back to /.
- InstallToggle client component: three-way state
  (unknown/yes/no). Asks "first time / already set up?", then shows
  either the 3-step install+init+join path with per-step copy
  buttons, or the single claudemesh join <token> command for users
  who have the CLI. Every code block has copy-to-clipboard.
- Security footer: "ed25519 keypair generated locally, you keep
  your keys, broker sees ciphertext only, leave anytime with
  claudemesh leave <mesh-slug>".

Invite generator (/dashboard/meshes/[id]/invite):
- QR code now encodes the HTTPS joinUrl instead of ic:// (phone
  cameras land on the web page → friendly path).
- Primary CTA copies the HTTPS URL. Secondary "Copy CLI command"
  for fast-path users. Footer explanation updated.

CLI coordination note: dispatched to broker/db lane — claudemesh CLI
needs to accept BOTH ic://join/<token> AND
https://claudemesh.com/join/<token> (extract <token> from pathname).
Server side already returns both.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/modules/join/install-toggle.tsx

@@ -0,0 +1,183 @@
+"use client";
+import { useState } from "react";
+
+interface Props {
+  token: string;
+}
+
+const JOIN_CMD = (token: string) => `claudemesh join ${token}`;
+const INSTALL_CMD = "npx claudemesh@latest init";
+
+export const InstallToggle = ({ token }: Props) => {
+  const [hasCli, setHasCli] = useState<"unknown" | "yes" | "no">("unknown");
+  const [copiedKey, setCopiedKey] = useState<string | null>(null);
+
+  const copy = async (text: string, key: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopiedKey(key);
+    setTimeout(() => setCopiedKey(null), 2000);
+  };
+
+  if (hasCli === "unknown") {
+    return (
+      <div className="flex flex-col gap-3 sm:flex-row">
+        <button
+          onClick={() => setHasCli("no")}
+          className="flex-1 rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5 text-left transition-colors hover:border-[var(--cm-clay)] hover:bg-[var(--cm-bg-hover)]"
+        >
+          <div
+            className="mb-1.5 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            first time
+          </div>
+          <div
+            className="text-lg font-medium text-[var(--cm-fg)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Install claudemesh →
+          </div>
+        </button>
+        <button
+          onClick={() => setHasCli("yes")}
+          className="flex-1 rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5 text-left transition-colors hover:border-[var(--cm-clay)] hover:bg-[var(--cm-bg-hover)]"
+        >
+          <div
+            className="mb-1.5 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            already set up
+          </div>
+          <div
+            className="text-lg font-medium text-[var(--cm-fg)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Join with CLI →
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  if (hasCli === "yes") {
+    const cmd = JOIN_CMD(token);
+    return (
+      <div className="space-y-4">
+        <div className="rounded-[var(--cm-radius-md)] border border-[var(--cm-clay)]/40 bg-[var(--cm-bg-elevated)] p-5">
+          <div
+            className="mb-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            run this in your terminal
+          </div>
+          <div className="flex items-center gap-2">
+            <code
+              className="flex-1 overflow-x-auto rounded-[var(--cm-radius-xs)] bg-[var(--cm-bg)] p-3 text-sm text-[var(--cm-fg)]"
+              style={{ fontFamily: "var(--cm-font-mono)" }}
+            >
+              {cmd}
+            </code>
+            <button
+              onClick={() => copy(cmd, "join")}
+              className="rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-4 py-3 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:bg-[var(--cm-clay-hover)]"
+              style={{ fontFamily: "var(--cm-font-sans)" }}
+            >
+              {copiedKey === "join" ? "Copied ✓" : "Copy"}
+            </button>
+          </div>
+        </div>
+        <button
+          onClick={() => setHasCli("unknown")}
+          className="text-xs text-[var(--cm-fg-tertiary)] underline underline-offset-4 hover:text-[var(--cm-fg)]"
+        >
+          ← Need to install first?
+        </button>
+      </div>
+    );
+  }
+
+  const joinCmd = JOIN_CMD(token);
+  return (
+    <div className="space-y-4">
+      <ol className="space-y-3">
+        <li className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5">
+          <div
+            className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            <span className="rounded-full bg-[var(--cm-clay)]/20 px-1.5">1</span>
+            install + init
+          </div>
+          <div className="flex items-center gap-2">
+            <code
+              className="flex-1 overflow-x-auto rounded-[var(--cm-radius-xs)] bg-[var(--cm-bg)] p-3 text-sm text-[var(--cm-fg)]"
+              style={{ fontFamily: "var(--cm-font-mono)" }}
+            >
+              {INSTALL_CMD}
+            </code>
+            <button
+              onClick={() => copy(INSTALL_CMD, "install")}
+              className="rounded-[var(--cm-radius-xs)] border border-[var(--cm-border)] px-3 py-3 text-sm text-[var(--cm-fg-secondary)] transition-colors hover:border-[var(--cm-fg)] hover:text-[var(--cm-fg)]"
+              style={{ fontFamily: "var(--cm-font-sans)" }}
+            >
+              {copiedKey === "install" ? "Copied ✓" : "Copy"}
+            </button>
+          </div>
+          <p
+            className="mt-2 text-xs text-[var(--cm-fg-tertiary)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Generates your ed25519 keypair locally and wires claudemesh into
+            your Claude Code config. You own the keys.
+          </p>
+        </li>
+        <li className="rounded-[var(--cm-radius-md)] border border-[var(--cm-clay)]/40 bg-[var(--cm-bg-elevated)] p-5">
+          <div
+            className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            <span className="rounded-full bg-[var(--cm-clay)]/20 px-1.5">2</span>
+            join the mesh
+          </div>
+          <div className="flex items-center gap-2">
+            <code
+              className="flex-1 overflow-x-auto rounded-[var(--cm-radius-xs)] bg-[var(--cm-bg)] p-3 text-sm text-[var(--cm-fg)]"
+              style={{ fontFamily: "var(--cm-font-mono)" }}
+            >
+              {joinCmd}
+            </code>
+            <button
+              onClick={() => copy(joinCmd, "join")}
+              className="rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-3 py-3 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:bg-[var(--cm-clay-hover)]"
+              style={{ fontFamily: "var(--cm-font-sans)" }}
+            >
+              {copiedKey === "join" ? "Copied ✓" : "Copy"}
+            </button>
+          </div>
+        </li>
+        <li className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5">
+          <div
+            className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            <span className="rounded-full bg-[var(--cm-border)] px-1.5">3</span>
+            verify
+          </div>
+          <p
+            className="text-sm text-[var(--cm-fg-secondary)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Your Claude Code session will announce itself to the mesh. Other
+            peers see you appear as a green dot in their dashboard.
+          </p>
+        </li>
+      </ol>
+      <button
+        onClick={() => setHasCli("unknown")}
+        className="text-xs text-[var(--cm-fg-tertiary)] underline underline-offset-4 hover:text-[var(--cm-fg)]"
+      >
+        ← Back
+      </button>
+    </div>
+  );
+};

apps/web/src/modules/mesh/invite-generator.tsx

@@ -35,13 +35,14 @@ interface GeneratedInvite {
   id: string;
   token: string;
   inviteLink: string;
+  joinUrl: string;
   expiresAt: Date;
   qrDataUrl: string;
 }
 
 export const InviteGenerator = ({ meshId }: { meshId: string }) => {
   const [result, setResult] = useState<GeneratedInvite | null>(null);
-  const [copied, setCopied] = useState(false);
+  const [copied, setCopied] = useState<"url" | "cli" | null>(null);
 
   const form = useForm<CreateMyInviteInput>({
     resolver: zodResolver(createMyInviteInputSchema),
@@ -58,6 +59,7 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
             id: string;
             token: string;
             inviteLink: string;
+            joinUrl: string;
             expiresAt: string;
           }
         | { error: string };
@@ -67,7 +69,9 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
         return;
       }
 
-      const qrDataUrl = await QRCode.toDataURL(res.inviteLink, {
+      // QR encodes the HTTPS join URL now — anyone with a camera can
+      // scan and land on the friendly /join/[token] page.
+      const qrDataUrl = await QRCode.toDataURL(res.joinUrl, {
         width: 256,
         margin: 1,
         color: { dark: "#141413", light: "#ffffff" },
@@ -77,6 +81,7 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
         id: res.id,
         token: res.token,
         inviteLink: res.inviteLink,
+        joinUrl: res.joinUrl,
         expiresAt: new Date(res.expiresAt),
         qrDataUrl,
       });
@@ -87,14 +92,14 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
     }
   };
 
-  const onCopy = async () => {
-    if (!result) return;
-    await navigator.clipboard.writeText(result.inviteLink);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const copy = async (text: string, key: "url" | "cli") => {
+    await navigator.clipboard.writeText(text);
+    setCopied(key);
+    setTimeout(() => setCopied(null), 2000);
   };
 
   if (result) {
+    const cliCmd = `claudemesh join ${result.token}`;
     return (
       <div className="space-y-6">
         <div className="rounded-lg border p-6">
@@ -109,10 +114,10 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
             <div className="space-y-4">
               <div>
                 <div className="text-muted-foreground mb-1 text-xs uppercase tracking-wider">
-                  Invite link
+                  Share this link
                 </div>
                 <code className="bg-muted block break-all rounded p-3 font-mono text-xs">
-                  {result.inviteLink}
+                  {result.joinUrl}
                 </code>
               </div>
               <div className="flex flex-wrap items-center gap-3 text-xs">
@@ -120,9 +125,16 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
                   expires {result.expiresAt.toLocaleDateString()}
                 </Badge>
               </div>
-              <div className="flex gap-2">
-                <Button onClick={onCopy} size="sm">
-                  {copied ? "Copied ✓" : "Copy link"}
+              <div className="flex flex-wrap gap-2">
+                <Button onClick={() => copy(result.joinUrl, "url")} size="sm">
+                  {copied === "url" ? "Copied ✓" : "Copy link"}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => copy(cliCmd, "cli")}
+                >
+                  {copied === "cli" ? "Copied ✓" : "Copy CLI command"}
                 </Button>
                 <Button
                   variant="outline"
@@ -140,12 +152,14 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
         </div>
         <div className="text-muted-foreground rounded border border-dashed p-4 text-xs">
           <p className="mb-2 font-medium">How your teammate joins:</p>
-          <code className="bg-muted block rounded p-2 font-mono text-xs">
-            claudemesh join {result.inviteLink}
-          </code>
-          <p className="mt-2">
-            Or scan the QR code from the claudemesh mobile app (coming soon).
+          <p className="mb-2">
+            Paste the link in Slack / Telegram / email. They land on a page
+            with step-by-step install, or run the CLI directly if they already
+            have it:
           </p>
+          <code className="bg-muted block rounded p-2 font-mono text-xs">
+            {cliCmd}
+          </code>
         </div>
       </div>
     );