fix(dashboard): wire updateTeam/inviteMember/listInvitations + email-verify gate + PAT copy fallback

BUGBASH 2026-05-20 — B6/B8 P0/P1 dashboard funnel fixes.

B6-P0 003 (Resource detail nav): VERIFIED already fixed in main at 8f6a3f9.
  ResourcesPage.tsx:188 uses r.token. No-op in this PR.

B6-P0 008 (email-verified UX on upgrade): added src/components/VerifyEmailBanner.tsx
  with isEmailVerifiedError() detector. Wired into CheckoutPage and BillingPage
  catch blocks so a 403 email_not_verified renders an actionable "Resend magic
  link" banner instead of a generic "checkout failed" toast. The server fix
  (auto-verify on claim) is the durable solution; this banner is the UI escape
  hatch for the window where api hasn't shipped that yet, and a permanent
  fallback for any other path that lands an unverified user on Upgrade.

B8-P1 F1 (updateTeam): wired the no-op stub at src/api/index.ts:445 to
  PATCH /api/v1/team. Body shape matches openapi.json (required: {name},
  1-200 chars). Response merges TeamSelf into the cached DashboardTeam so
  consumers reading slug/owner_id/member_count keep working.

B8-P1 F2 (listInvitations): wired the empty-stub at src/api/index.ts:489 to
  GET /api/v1/team/invitations (owner-only). 401/403 fail open to [] so
  non-owners see the empty pending-invites section instead of a broken page.

B8-P1 F3 (inviteMember): wired the no-op stub at src/api/index.ts:496 to
  POST /api/v1/team/members/invite. Returns the created invitation row.

  Side change: src/api/types.ts Role gains 'member' so the listInvitations
  adapter cast is honest — the server's invite enum is
  {admin, developer, viewer, member}.

B8-P1 F5 (DeployTtlPolicyCard admin gate): added a listMembers() probe in
  src/pages/SettingsPage.tsx that derives the caller's role and renders
  null for non-owner/admin. Server still enforces 403 on PATCH
  /api/v1/team/settings — this is UX cleanup so devs/viewers don't see a
  Save button they can't use. Fails closed: hides while role is unknown.

B8-P1 F21 (PAT copy fallback): replaced the inline PAT-mint-result block
  in SettingsPage with PatCreatedBanner. The token now lives in a
  textarea (selectable + select() on copy failure) and a loud red toast
  fires when navigator.clipboard.writeText() refuses (insecure context,
  blocked permission). The user can keyboard-copy from the textarea
  instead of losing the one-time-shown token to a silent console.warn.

Gates:
  - tsc --noEmit: green
  - vitest run: 662 passed, 3 skipped (38 test files)
  - npm run build: green (vite + prerender both pass)

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

Author: mastermanas805

src/api/index.ts

@@ -448,11 +448,38 @@ export async function fetchTeam(): Promise<{ ok: true; team: DashboardTeam }> {
   return { ok: true, team: me.team }
 }
 
-export async function updateTeam(_patch: { name?: string; display_name?: string }): Promise<{ ok: true; team: DashboardTeam }> {
-  // PATCH /api/v1/team isn't implemented. Return current team unchanged
-  // and let the caller surface "this isn't editable yet" to the user.
+export async function updateTeam(patch: { name?: string; display_name?: string }): Promise<{ ok: true; team: DashboardTeam }> {
+  // B8-P1 F1 (BUGBASH 2026-05-20): PATCH /api/v1/team is live (api/openapi.json
+  // confirms: required `name`, 1-200 chars, whitespace trimmed). The previous
+  // implementation was a no-op stub that silently returned the cached team
+  // unchanged — every rename "succeeded" from the UI's POV but never reached
+  // the server. We now PATCH with the new name (prefer `name`, fall back to
+  // `display_name` for callers that still pass that key) and rebuild the
+  // DashboardTeam from the server response so the UI reflects the persisted
+  // value, not the optimistic input. On error we surface to the caller so the
+  // form can show a real banner.
+  const name = (patch.name ?? patch.display_name ?? '').trim()
+  if (!name) {
+    // Don't waste a round-trip on an empty patch — the api would 400.
+    const me = await fetchMe()
+    return { ok: true, team: me.team }
+  }
+  type PatchResp = { ok: boolean; team: { id: string; name: string; plan_tier: string; has_active_subscription: boolean; created_at: string } }
+  const r = await call<PatchResp>('/api/v1/team', {
+    method: 'PATCH',
+    body: JSON.stringify({ name }),
+  })
+  // The PATCH response is the slim TeamSelf shape (no slug / owner_id /
+  // member_count). Merge with /auth/me-derived team so consumers that read
+  // those fields keep working.
   const me = await fetchMe()
-  return { ok: true, team: me.team }
+  const team: DashboardTeam = {
+    ...me.team,
+    name: r.team?.name ?? name,
+    tier: (r.team?.plan_tier as any) ?? me.team.tier,
+    created_at: r.team?.created_at ?? me.team.created_at,
+  }
+  return { ok: true, team }
 }
 
 export async function listMembers(): Promise<{ ok: true; members: TeamMember[]; member_limit: number }> {
@@ -493,18 +520,93 @@ export async function listMembers(): Promise<{ ok: true; members: TeamMember[];
 }
 
 export async function listInvitations(): Promise<{ ok: true; invitations: TeamInvitation[] }> {
-  // GET /api/v1/teams/:id/invitations exists on the agent API but the
-  // dashboard adapter isn't wired yet. Return empty until then — better
-  // than fabricating pending invites that don't exist.
-  return { ok: true, invitations: [] }
+  // B8-P1 F2 (BUGBASH 2026-05-20): GET /api/v1/team/invitations is live
+  // (owner-only, see openapi.json — 200/401/403). The previous stub returned
+  // [] so TeamPage's "Pending · 0" was a lie when the team had real invites.
+  // We now call the live endpoint and adapt. On 401 (not logged in) and 403
+  // (caller isn't owner) we fail open to []: the team page renders the
+  // empty-invite section either way, and a banner would be noise for the
+  // common case of non-owners viewing the page.
+  type InviteRow = {
+    id: string
+    email: string
+    role: string
+    status?: string
+    invited_by_user_id?: string
+    invited_by?: string
+    invited_by_name?: string
+    created_at: string
+    expires_at: string
+  }
+  type Resp = { ok: boolean; invitations: InviteRow[] }
+  try {
+    const r = await call<Resp>('/api/v1/team/invitations')
+    const invitations: TeamInvitation[] = (r.invitations ?? []).map((i) => ({
+      id: i.id,
+      email: i.email,
+      role: i.role as TeamInvitation['role'],
+      status: (i.status as TeamInvitation['status']) ?? 'pending',
+      invited_by: i.invited_by ?? i.invited_by_user_id ?? '',
+      invited_by_name: i.invited_by_name,
+      created_at: i.created_at,
+      expires_at: i.expires_at,
+    }))
+    return { ok: true, invitations }
+  } catch (e: any) {
+    if (e?.status === 401 || e?.status === 403) {
+      // Not owner / not logged in — render zero pending invites rather
+      // than blowing up the team page.
+      return { ok: true, invitations: [] }
+    }
+    throw e
+  }
 }
 
-export async function inviteMember(_body: { email: string; role: string }): Promise<{ ok: true }> {
-  // The team-invite flow is agent-driven in this product (see TeamPage
-  // PromptCard). The dashboard never POSTs invitations directly. Return
-  // ok so any legacy callers don't break; the actual invite is sent by
-  // the agent running the user's prompt.
-  return { ok: true }
+export async function inviteMember(body: { email: string; role: string }): Promise<{ ok: true; invitation?: TeamInvitation }> {
+  // B8-P1 F3 (BUGBASH 2026-05-20): POST /api/v1/team/members/invite is live
+  // (owner/admin only, see openapi.json — 201/400/401/403/409/429). The
+  // previous stub returned `{ ok: true }` without contacting the server, so
+  // the agent-driven flow that the prompt-card describes ran on top of a
+  // broken direct-call path: any code calling inviteMember thought the
+  // invite was sent when nothing happened.
+  //
+  // We now POST and surface the created invitation (or a structured error)
+  // to the caller. The role enum on the server is {admin, developer, viewer,
+  // member}; we pass through whatever the caller sent and let the api do the
+  // validation (returns 400 for an unknown value).
+  type CreateResp = {
+    ok: boolean
+    invitation?: {
+      id: string
+      email: string
+      role: string
+      status?: string
+      invited_by_user_id?: string
+      invited_by?: string
+      invited_by_name?: string
+      created_at: string
+      expires_at: string
+    }
+  }
+  const r = await call<CreateResp>('/api/v1/team/members/invite', {
+    method: 'POST',
+    body: JSON.stringify({ email: body.email, role: body.role }),
+  })
+  if (!r.invitation) {
+    return { ok: true }
+  }
+  const i = r.invitation
+  const invitation: TeamInvitation = {
+    id: i.id,
+    email: i.email,
+    role: i.role as TeamInvitation['role'],
+    status: (i.status as TeamInvitation['status']) ?? 'pending',
+    invited_by: i.invited_by ?? i.invited_by_user_id ?? '',
+    invited_by_name: i.invited_by_name,
+    created_at: i.created_at,
+    expires_at: i.expires_at,
+  }
+  return { ok: true, invitation }
 }
 
 // ─── Resources (LIVE) ───────────────────────────────────────────────────

src/api/types.ts

@@ -4,7 +4,11 @@
 // ------------------------------------------------------------------
 
 export type Tier = 'anonymous' | 'free' | 'hobby' | 'hobby_plus' | 'pro' | 'team' | 'growth'
-export type Role = 'owner' | 'admin' | 'developer' | 'viewer'
+// Role: the server-side enum is {owner, admin, developer, viewer, member}.
+// 'member' is the default role on POST /api/v1/team/members/invite (see
+// api/openapi.json) and was missing from the dashboard type, which made
+// `listInvitations()` lose row-level type safety after wiring B8-P1 F2.
+export type Role = 'owner' | 'admin' | 'developer' | 'viewer' | 'member'
 export type Env = 'production' | 'staging' | 'development' | string
 
 export type ResourceType =

src/components/VerifyEmailBanner.tsx

@@ -0,0 +1,142 @@
+// VerifyEmailBanner — B6-P0 008 (BUGBASH 2026-05-20).
+//
+// The agent-driven funnel was: claim → land on dashboard → click Upgrade →
+// POST /api/v1/billing/checkout → Razorpay redirect. The api gate-checks
+// `email_verified` on the team's primary user before minting a Razorpay
+// subscription, so any team that landed via /claim (which creates the user
+// but doesn't auto-verify the email) hits a 403 at checkout. The dashboard
+// previously rendered that 403 as a generic "checkout failed" toast, which
+// gave the user no recovery path — they couldn't tell *why* and had no
+// "resend magic link" action to take.
+//
+// This component is the recovery path. Callers detect the api's "email
+// not verified" envelope (status 403 + a code/message hinting at email
+// verification) and render the banner inline next to the failed CTA. The
+// banner offers a single click to resend the magic-link email via POST
+// /auth/email/start (the same endpoint LoginPage uses), then surfaces the
+// "check your inbox" confirmation in place. Once the user clicks the link
+// and re-loads the page their session carries `email_verified=true` and
+// the original Upgrade click works.
+//
+// The server fix (auto-verify on claim) is the right durable fix; this
+// banner exists for the window where that hasn't shipped, and as a
+// permanent fallback for any other path that lands an unverified user on
+// the upgrade button (e.g. an admin manually creating a user).
+
+import { useState } from 'react'
+
+const SUFFIX = '/login/callback'
+
+/** Heuristic: was the caught error the api's email-not-verified gate?
+ *
+ *  The api returns 403 with a code like `email_not_verified` and/or a
+ *  message containing "verify". We match on either. Status 403 alone is
+ *  too broad (RBAC failures, admin gates, etc.), so we require a hint.
+ */
+export function isEmailVerifiedError(err: unknown): boolean {
+  if (!err || typeof err !== 'object') return false
+  const e = err as { status?: number; code?: string; message?: string }
+  if (e.status !== 403) return false
+  const code = (e.code ?? '').toLowerCase()
+  const msg = (e.message ?? '').toLowerCase()
+  return (
+    code.includes('email') && (code.includes('verif') || code.includes('not_verified'))
+  ) || (msg.includes('email') && msg.includes('verif'))
+}
+
+/** Pulled out so tests + the LoginPage can share the same probe. */
+function resolveApiBase(): string {
+  // Mirror LoginPage.resolveApiBase: prefer the build-time API base if set,
+  // fall back to current origin. The Vite proxy handles dev.
+  const fromEnv = (import.meta as any).env?.VITE_API_BASE
+  if (typeof fromEnv === 'string' && fromEnv.length > 0) return fromEnv
+  return ''
+}
+
+export function VerifyEmailBanner({ email }: { email?: string }) {
+  const [busy, setBusy] = useState(false)
+  const [sent, setSent] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+
+  const targetEmail = (email ?? '').trim()
+
+  async function resend() {
+    if (!targetEmail) {
+      setErr('No email on this session — please log in again.')
+      return
+    }
+    setBusy(true)
+    setErr(null)
+    try {
+      const apiBase = resolveApiBase()
+      const url = apiBase + '/auth/email/start'
+      const returnTo = window.location.origin + SUFFIX
+      const resp = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: targetEmail, return_to: returnTo }),
+      })
+      // /auth/email/start deliberately returns 202 even for unknown emails
+      // to avoid email-enumeration. Treat any 2xx as success.
+      if (resp.status >= 400) {
+        const body = await resp.json().catch(() => null)
+        throw new Error((body && body.message) || resp.statusText)
+      }
+      setSent(true)
+    } catch (e: any) {
+      setErr(e?.message ?? 'Could not send the magic link.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div
+      role="alert"
+      data-testid="verify-email-banner"
+      style={{
+        marginTop: 12,
+        padding: '12px 14px',
+        border: '1px solid var(--accent, #00e48e)',
+        background: 'var(--accent-soft, rgba(0, 228, 142, 0.08))',
+        borderRadius: 6,
+        fontSize: 13,
+        lineHeight: 1.55,
+      }}
+    >
+      <div style={{ marginBottom: 8 }}>
+        <strong>Verify your email to upgrade.</strong> Checkout is gated on a
+        verified email — the claim flow creates your account but doesn't auto-verify it.
+      </div>
+      {targetEmail && (
+        <div style={{ marginBottom: 10, color: 'var(--text-dim)', fontSize: 12 }}>
+          We'll send the magic link to <code>{targetEmail}</code>.
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <button
+          className="btn btn-sm btn-primary"
+          data-testid="verify-email-resend"
+          onClick={resend}
+          disabled={busy || sent || !targetEmail}
+        >
+          {sent ? 'Sent — check your inbox' : busy ? 'Sending…' : 'Resend magic link'}
+        </button>
+        {sent && (
+          <span data-testid="verify-email-sent-hint" style={{ fontSize: 11.5, color: 'var(--text-dim)' }}>
+            Click the link, then retry Upgrade.
+          </span>
+        )}
+      </div>
+      {err && (
+        <div
+          role="alert"
+          data-testid="verify-email-resend-error"
+          style={{ marginTop: 10, color: 'var(--rose, #ff5a6e)', fontSize: 12 }}
+        >
+          {err}
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/BillingPage.tsx

@@ -8,6 +8,7 @@ import * as api from '../api'
 import type { BillingDetails, BillingUsage, ChangePlanTier, Invoice, PlanFrequency, Tier } from '../api'
 import { useDashboardCtx } from '../hooks/useDashboardCtx'
 import { formatInvoiceAmount, formatInvoiceDate } from '../lib/currency'
+import { isEmailVerifiedError, VerifyEmailBanner } from '../components/VerifyEmailBanner'
 
 // Tiers eligible for the in-dashboard Change-plan modal. Anonymous + free
 // users have no active subscription to swap, so the /api/v1/billing/change-
@@ -169,6 +170,10 @@ export function BillingPage() {
   const [billingLoading, setBillingLoading] = useState(true)
   const [checkoutErr, setCheckoutErr] = useState<string | null>(null)
   const [checkoutLoading, setCheckoutLoading] = useState(false)
+  // B6-P0 008 (BUGBASH 2026-05-20): when the api 403s for email_not_verified,
+  // we surface the VerifyEmailBanner inline next to the upgrade grid instead
+  // of just dropping the failure into the generic checkout error toast.
+  const [verifyEmailGate, setVerifyEmailGate] = useState(false)
 
   // Frequency state — default Annual. Read once on mount.
   const [frequency, setFrequencyState] = useState<PlanFrequency>(() => readStoredFrequency())
@@ -294,6 +299,7 @@ export function BillingPage() {
       return
     }
     setCheckoutErr(null)
+    setVerifyEmailGate(false)
     setCheckoutLoading(true)
     try {
       // Promo codes are intentionally NOT plumbed through the dashboard
@@ -309,7 +315,13 @@ export function BillingPage() {
       }
       setCheckoutErr('checkout returned no url')
     } catch (e: any) {
-      setCheckoutErr(e?.message ?? 'checkout failed')
+      if (isEmailVerifiedError(e)) {
+        // B6-P0 008: don't render the generic toast — show the recoverable
+        // "Verify your email" banner with a resend-magic-link button.
+        setVerifyEmailGate(true)
+      } else {
+        setCheckoutErr(e?.message ?? 'checkout failed')
+      }
     } finally {
       setCheckoutLoading(false)
     }
@@ -416,6 +428,9 @@ export function BillingPage() {
             {checkoutErr}
           </div>
         )}
+        {verifyEmailGate && (
+          <VerifyEmailBanner email={me?.user?.email} />
+        )}
         <div style={{ marginTop: 10, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <a
             className="btn btn-ghost btn-sm"