feat(web): email invite mode + ic:// removal in invite generator (wave 3)

Completes the v2 invite user experience. The generator now ships two
delivery modes behind a simple Link | Email toggle, and the vestigial
ic:// scheme is gone from every user-visible surface.

Modes
- Link (default, existing flow): mints a v2 invite, displays short URL
  + QR + CLI command. No behavioral change vs wave 2.
- Email (new): admin types a recipient email, submit dispatches through
  the POST /api/my/meshes/:id/invites/email endpoint (wave 2), which
  mints a normal v2 invite, records a pending_invite row, and stubs the
  Postmark send with a TODO. Result card shows a "✓ Invite sent to X"
  banner plus the same QR card so the admin can also share manually.

Honest UX copy on the stub:
"Email delivery is stubbed in v0.1.x — the invite is valid. Share the
link directly if needed." Avoids pretending something shipped that
hasn't.

ic:// cleanup
- inviteLink field no longer rendered or stored (still returned by the
  API for backward compatibility; just not surfaced)
- CLI command now copies `claudemesh join <code>` (falls back to
  shortUrl when code is null), matching the new v2 entry point
- Zero remaining `ic://` references in the UI

Implementation notes
- Two separate useForm instances (linkForm, emailForm) with dedicated
  resolvers and submit handlers — clearer state boundaries than
  conditional validation on a merged schema
- Mode toggle uses role="group" + aria-pressed, focus-visible ring,
  keyboard-navigable
- Email result banner is role="status" for screen readers
- RPC client has one `as any` on `(api.my.meshes[":id"].invites as any)
  .email.$post` — the endpoint IS registered server-side (wave 2) but
  the monorepo's Hono type regen is out-of-band; TODO comment marks the
  cast for removal when the RPC types catch up
- No new deps
- Component export signature unchanged

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

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

@@ -6,7 +6,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import QRCode from "qrcode";
 
 import {
+  createEmailInviteInputSchema,
   createMyInviteInputSchema,
+  type CreateEmailInviteInput,
   type CreateMyInviteInput,
 } from "@turbostarter/api/schema";
 import { handle } from "@turbostarter/api/utils";
@@ -33,26 +35,53 @@ import { api } from "~/lib/api/client";
 
 interface GeneratedInvite {
   id: string;
+  /** Raw token (only set for link-mode results — empty string when email mode). */
   token: string;
-  inviteLink: string;
+  /** Short code for the CLI command. Falls back to shortUrl display if null. */
+  code: string | null;
   joinUrl: string;
   /** Short human-friendly URL, preferred for sharing. Null if the backend didn't mint one. */
   shortUrl: string | null;
   expiresAt: Date;
   qrDataUrl: string;
+  /** When set, the invite was dispatched via email and a confirmation banner is shown. */
+  sentToEmail?: string;
 }
 
+type Mode = "link" | "email";
+
+const qrOptions = {
+  width: 256,
+  margin: 1,
+  color: { dark: "#141413", light: "#ffffff" },
+} as const;
+
 export const InviteGenerator = ({ meshId }: { meshId: string }) => {
+  const [mode, setMode] = useState<Mode>("link");
   const [result, setResult] = useState<GeneratedInvite | null>(null);
   const [copied, setCopied] = useState<"url" | "cli" | null>(null);
   const [showAdvanced, setShowAdvanced] = useState(false);
 
-  const form = useForm<CreateMyInviteInput>({
+  // Two separate forms — simpler than conditional validation, clearer state
+  // boundaries, and each form owns its own submit + error surface.
+  const linkForm = useForm<CreateMyInviteInput>({
     resolver: zodResolver(createMyInviteInputSchema),
     defaultValues: { role: "member", maxUses: 1, expiresInDays: 7 },
   });
 
-  const onSubmit = async (values: CreateMyInviteInput) => {
+  const emailForm = useForm<CreateEmailInviteInput>({
+    resolver: zodResolver(createEmailInviteInputSchema),
+    defaultValues: {
+      email: "",
+      role: "member",
+      maxUses: 1,
+      expiresInDays: 7,
+    },
+  });
+
+  const activeForm = mode === "link" ? linkForm : emailForm;
+
+  const onSubmitLink = async (values: CreateMyInviteInput) => {
     try {
       const res = (await handle(api.my.meshes[":id"].invites.$post)({
         param: { id: meshId },
@@ -60,6 +89,7 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
       })) as {
         id: string;
         token: string;
+        code: string | null;
         inviteLink: string;
         joinUrl: string;
         shortUrl: string | null;
@@ -70,42 +100,103 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
       // and short enough for the QR to stay low-density. Falls back to the
       // long token URL for legacy invites minted before the shortener shipped.
       const qrTarget = res.shortUrl ?? res.joinUrl;
-      const qrDataUrl = await QRCode.toDataURL(qrTarget, {
-        width: 256,
-        margin: 1,
-        color: { dark: "#141413", light: "#ffffff" },
-      });
+      const qrDataUrl = await QRCode.toDataURL(qrTarget, qrOptions);
 
       setResult({
         id: res.id,
         token: res.token,
-        inviteLink: res.inviteLink,
+        code: res.code,
         joinUrl: res.joinUrl,
         shortUrl: res.shortUrl,
         expiresAt: new Date(res.expiresAt),
         qrDataUrl,
       });
     } catch (e) {
-      form.setError("root", {
+      linkForm.setError("root", {
         message: e instanceof Error ? e.message : "Failed to generate invite.",
       });
     }
   };
 
+  const onSubmitEmail = async (values: CreateEmailInviteInput) => {
+    try {
+      // TODO(types): remove `as any` after RPC type regen picks up the new
+      // `.email` subroute registered in packages/api/src/modules/mesh/router.ts.
+      const res = (await handle(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (api.my.meshes[":id"].invites as any).email.$post,
+      )({
+        param: { id: meshId },
+        json: values,
+      })) as {
+        pendingInviteId: string;
+        code: string;
+        email: string;
+        shortUrl: string;
+        expiresAt: string;
+      };
+
+      const qrDataUrl = await QRCode.toDataURL(res.shortUrl, qrOptions);
+
+      setResult({
+        id: res.pendingInviteId,
+        token: "",
+        code: res.code,
+        joinUrl: res.shortUrl,
+        shortUrl: res.shortUrl,
+        expiresAt: new Date(res.expiresAt),
+        qrDataUrl,
+        sentToEmail: res.email,
+      });
+    } catch (e) {
+      emailForm.setError("root", {
+        message: e instanceof Error ? e.message : "Failed to send invite.",
+      });
+    }
+  };
+
   const copy = async (text: string, key: "url" | "cli") => {
     await navigator.clipboard.writeText(text);
     setCopied(key);
     setTimeout(() => setCopied(null), 2000);
   };
 
+  const resetAll = () => {
+    setResult(null);
+    linkForm.reset();
+    emailForm.reset();
+  };
+
   if (result) {
-    // Prefer the short URL everywhere it exists. CLI command still uses the
-    // long token because the broker resolves by token — swapping CLI to short
-    // codes is part of the v2 protocol, not this URL-shortener change.
+    // Prefer the short URL everywhere it exists. CLI command uses the code
+    // when available (short, easy to paste); otherwise falls back to the
+    // shortUrl, which the CLI also accepts as an argument.
     const primaryUrl = result.shortUrl ?? result.joinUrl;
-    const cliCmd = `claudemesh join ${result.token}`;
+    const cliArg = result.code ?? result.shortUrl ?? "";
+    const cliCmd = `claudemesh join ${cliArg}`;
     return (
       <div className="space-y-6">
+        {result.sentToEmail && (
+          <div className="space-y-2">
+            <div
+              role="status"
+              className="border-primary/30 bg-primary/5 text-foreground flex items-start gap-3 rounded-lg border p-4 text-sm"
+            >
+              <span aria-hidden="true" className="text-primary mt-0.5">
+                ✓
+              </span>
+              <div>
+                <p className="font-medium">
+                  Invite sent to {result.sentToEmail}
+                </p>
+                <p className="text-muted-foreground mt-0.5 text-xs">
+                  Email delivery is stubbed in v0.1.x — the invite is valid.
+                  Share the link directly if needed.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
         <div className="rounded-lg border p-6">
           <div className="grid gap-6 md:grid-cols-[220px_1fr]">
             <div className="flex items-start justify-center">
@@ -140,14 +231,7 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
                 >
                   {copied === "cli" ? "Copied ✓" : "Copy CLI command"}
                 </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setResult(null);
-                    form.reset();
-                  }}
-                >
+                <Button variant="outline" size="sm" onClick={resetAll}>
                   Generate another
                 </Button>
               </div>
@@ -169,101 +253,196 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
     );
   }
 
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="max-w-md space-y-5">
-        <p className="text-muted-foreground text-sm">
-          One-time invite for a new member. Valid for 7 days.
-        </p>
+  const ModeToggle = () => (
+    <div
+      role="group"
+      aria-label="Invite delivery mode"
+      className="bg-muted inline-flex rounded-md p-1 text-sm"
+    >
+      <button
+        type="button"
+        aria-pressed={mode === "link"}
+        onClick={() => setMode("link")}
+        className={`focus-visible:ring-ring rounded px-3 py-1.5 font-medium transition focus-visible:outline-none focus-visible:ring-2 ${
+          mode === "link"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+      >
+        Link
+      </button>
+      <button
+        type="button"
+        aria-pressed={mode === "email"}
+        onClick={() => setMode("email")}
+        className={`focus-visible:ring-ring rounded px-3 py-1.5 font-medium transition focus-visible:outline-none focus-visible:ring-2 ${
+          mode === "email"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+      >
+        Email
+      </button>
+    </div>
+  );
 
-        {/* Advanced options — hidden by default. Defaults ship 90% of users. */}
-        <div className="rounded-md border border-dashed">
-          <button
-            type="button"
-            onClick={() => setShowAdvanced((s) => !s)}
-            className="text-muted-foreground hover:text-foreground flex w-full items-center justify-between px-3 py-2 text-xs uppercase tracking-wider"
-            aria-expanded={showAdvanced}
-          >
-            <span>Advanced</span>
-            <span aria-hidden="true">{showAdvanced ? "−" : "+"}</span>
-          </button>
-          {showAdvanced && (
-            <div className="space-y-4 border-t px-3 py-4">
-              <FormField
-                control={form.control}
-                name="role"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Role</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="member">Member</SelectItem>
-                        <SelectItem value="admin">Admin</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="maxUses"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Max uses</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        min={1}
-                        max={1000}
-                        {...field}
-                        onChange={(e) => field.onChange(Number(e.target.value))}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="expiresInDays"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Expires in (days)</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        min={1}
-                        max={365}
-                        {...field}
-                        onChange={(e) => field.onChange(Number(e.target.value))}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-          )}
+  // Advanced block is rendered against whichever form is active. Because the
+  // two schemas share identical role/maxUses/expiresInDays shapes, the field
+  // components are structurally the same — we just bind to the active form.
+  const AdvancedBlock = () => (
+    <div className="rounded-md border border-dashed">
+      <button
+        type="button"
+        onClick={() => setShowAdvanced((s) => !s)}
+        className="text-muted-foreground hover:text-foreground flex w-full items-center justify-between px-3 py-2 text-xs uppercase tracking-wider"
+        aria-expanded={showAdvanced}
+      >
+        <span>Advanced</span>
+        <span aria-hidden="true">{showAdvanced ? "−" : "+"}</span>
+      </button>
+      {showAdvanced && (
+        <div className="space-y-4 border-t px-3 py-4">
+          <FormField
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            control={activeForm.control as any}
+            name="role"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Role</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="member">Member</SelectItem>
+                    <SelectItem value="admin">Admin</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            control={activeForm.control as any}
+            name="maxUses"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Max uses</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={1000}
+                    {...field}
+                    onChange={(e) => field.onChange(Number(e.target.value))}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            control={activeForm.control as any}
+            name="expiresInDays"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Expires in (days)</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={365}
+                    {...field}
+                    onChange={(e) => field.onChange(Number(e.target.value))}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
         </div>
+      )}
+    </div>
+  );
 
-        {form.formState.errors.root && (
-          <p className="text-destructive text-sm">
-            {form.formState.errors.root.message}
-          </p>
-        )}
-        <Button type="submit" disabled={form.formState.isSubmitting}>
-          {form.formState.isSubmitting ? "Generating…" : "Generate invite"}
-        </Button>
-      </form>
-    </Form>
+  return (
+    <div className="max-w-md space-y-5">
+      <ModeToggle />
+
+      {mode === "link" ? (
+        <Form {...linkForm}>
+          <form
+            onSubmit={linkForm.handleSubmit(onSubmitLink)}
+            className="space-y-5"
+          >
+            <p className="text-muted-foreground text-sm">
+              One-time invite for a new member. Valid for 7 days.
+            </p>
+
+            <AdvancedBlock />
+
+            {linkForm.formState.errors.root && (
+              <p className="text-destructive text-sm">
+                {linkForm.formState.errors.root.message}
+              </p>
+            )}
+            <Button type="submit" disabled={linkForm.formState.isSubmitting}>
+              {linkForm.formState.isSubmitting
+                ? "Generating…"
+                : "Generate invite"}
+            </Button>
+          </form>
+        </Form>
+      ) : (
+        <Form {...emailForm}>
+          <form
+            onSubmit={emailForm.handleSubmit(onSubmitEmail)}
+            className="space-y-5"
+          >
+            <p className="text-muted-foreground text-sm">
+              Send a one-time invite directly to an email address. Valid for 7
+              days.
+            </p>
+
+            <FormField
+              control={emailForm.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      autoComplete="email"
+                      placeholder="teammate@company.com"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <AdvancedBlock />
+
+            {emailForm.formState.errors.root && (
+              <p className="text-destructive text-sm">
+                {emailForm.formState.errors.root.message}
+              </p>
+            )}
+            <Button type="submit" disabled={emailForm.formState.isSubmitting}>
+              {emailForm.formState.isSubmitting ? "Sending…" : "Send invite"}
+            </Button>
+          </form>
+        </Form>
+      )}
+    </div>
   );
 };