fix(auth): complete CLI login for already-authed users + login CTA on account_exists claim (#220)

* fix(auth): complete CLI login for already-authed users + add login CTA on account_exists claim

Two funnel-blocking UI gaps found in a live cross-interface journey test:

BUG 1 — `instant login` (CLI device-flow) could not complete for an
already-signed-in user. The CLI opens /login?cli_session=<id> and polls,
but an already-authed user lands directly on LoginPage with a live token
and never takes the OAuth/magic-link callback path that fires
completeCliSession — so the device flow never completed and the CLI
polled forever. LoginPage now fires the SAME completion path
(completeCliSession, reused from LoginCallbackPage — no duplicated fetch)
on mount when both getToken() and a cli_session param are present, then
shows a "return to your terminal" confirmation instead of the sign-in
form. A completion failure surfaces a non-blocking note (still signed in,
re-run `instant login`).

BUG 2 — the account_exists (409) claim error told the user to "log in
first" with no control to do so. ClaimPage now renders a "Log in to
claim" CTA on that specific error (keyed on error code, not status, since
already_claimed is also 409) routing to /login?next=<claim path with
token> so the claim resumes after sign-in. The claim is still correctly
refused for an existing account — this only adds the recovery control.

Tests: LoginPage already-authed + cli_session completion (fired / no-op
when unauthed / no-op without param / non-blocking failure); ClaimPage
account_exists CTA (renders + carries token, not on already_claimed/plain
errors). Playwright D2-authed + account_exists CTA specs in
funnel-recovery.spec.ts. Patch coverage 100% (diff-cover).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(login): fire CLI completion exactly once under StrictMode + restore 100% patch coverage

The mount effect double-invoked under React StrictMode, firing
completeCliSession twice (Playwright caught it: count=2 locally, racy 0 in
CI). Guard with a fire-once ref and drop the per-pass `cancelled` flag —
under StrictMode the first pass's cleanup fired before the async resolved,
so the cancelled-gate (with the ref blocking the second pass) dropped the
result and never rendered the confirmation. A setState after unmount is a
no-op in React 19, so firing once and always committing is correct.

Also split the pre-existing PAT-error ternary into single-line statements
so v8 emits per-line DA markers (its multi-line-ternary continuation lines
carry no marker), restoring diff-cover to 100% patch coverage after the
insertion shifted those lines into the diff window.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: mastermanas805

e2e/funnel-recovery.spec.ts

@@ -191,4 +191,83 @@ test.describe('D2 — CLI device-flow completion', () => {
     await expect(page).toHaveURL(/\/pricing$/)
     expect(completeCalled).toBe(false)
   })
+
+  // D2-authed: an ALREADY-signed-in user who runs `instant login` lands on
+  // /login?cli_session=<id> with a live token in localStorage. They never take
+  // the OAuth/magic-link callback path, so LoginPage itself must POST
+  // /auth/cli/{id}/complete on mount and show a terminal-return confirmation
+  // instead of the sign-in form.
+  const TOKEN_LS_KEY = 'instanode.token'
+
+  test('already-authed: LoginPage completes the CLI session and confirms', async ({ page }) => {
+    const completeCap = { id: '', count: 0 }
+    await page.route(CLI_COMPLETE_PATH, (route: Route) => {
+      completeCap.count += 1
+      const m = new URL(route.request().url()).pathname.match(/\/auth\/cli\/([^/]+)\/complete$/)
+      completeCap.id = m ? decodeURIComponent(m[1]) : ''
+      return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+    })
+    // Seed a live session token BEFORE the app bundle runs so getToken() returns it.
+    await page.addInitScript(([k, v]) => {
+      try { localStorage.setItem(k, v) } catch {}
+    }, [TOKEN_LS_KEY, 'ink_live_session'] as const)
+
+    await page.goto(`/login?cli_session=${CLI_SESSION_ID}`)
+    await expect(page.getByTestId('cli-approved-ok')).toBeVisible()
+    await expect(page.getByTestId('cli-approved-ok')).toContainText('return to your terminal')
+    // The sign-in form must NOT render — the user came from a terminal.
+    await expect(page.getByTestId('oauth-github')).toHaveCount(0)
+    await expect.poll(() => completeCap.count).toBe(1)
+    expect(completeCap.id).toBe(CLI_SESSION_ID)
+  })
+
+  test('already-authed: a completion failure shows the non-blocking failure note', async ({ page }) => {
+    await page.route(CLI_COMPLETE_PATH, (route: Route) =>
+      route.fulfill({ status: 404, contentType: 'application/json', body: JSON.stringify({ error: 'session_not_found' }) }),
+    )
+    await page.addInitScript(([k, v]) => {
+      try { localStorage.setItem(k, v) } catch {}
+    }, [TOKEN_LS_KEY, 'ink_live_session'] as const)
+
+    await page.goto(`/login?cli_session=${CLI_SESSION_ID}`)
+    await expect(page.getByTestId('cli-approved-failed')).toBeVisible()
+    await expect(page.getByTestId('cli-approved-failed')).toContainText('instant login')
+  })
+})
+
+// ─── account_exists claim recovery — login CTA on the 409 dead-end ───────────
+
+test.describe('account_exists claim recovery via login CTA', () => {
+  const CLAIM_PATH = '**/claim'
+
+  function buildClaimJWT(rt: string[] = ['postgres'], tok: string[] = ['abc12345xyz']): string {
+    const b64url = (obj: unknown) =>
+      Buffer.from(JSON.stringify(obj)).toString('base64')
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+    const header = b64url({ alg: 'HS256', typ: 'JWT' })
+    const payload = b64url({ rt, tok, exp: Math.floor(Date.now() / 1000) + 3600 })
+    return `${header}.${payload}.sig`
+  }
+
+  test('account_exists (409) renders a "Log in to claim" CTA carrying the token through next=', async ({ page }) => {
+    const jwt = buildClaimJWT()
+    await page.route(CLAIM_PATH, (route: Route) => {
+      if (route.request().method() !== 'POST') return route.continue()
+      return route.fulfill({
+        status: 409,
+        contentType: 'application/json',
+        body: JSON.stringify({ ok: false, error: 'account_exists', message: 'An account already exists for this email. Sign in instead.' }),
+      })
+    })
+    await page.goto(`/claim?t=${jwt}`)
+    await page.getByTestId('claim-email').fill('taken@acme.dev')
+    await page.getByTestId('claim-submit').click()
+    const cta = page.getByTestId('claim-account-exists-login')
+    await expect(cta).toBeVisible()
+    const href = await cta.getAttribute('href')
+    expect(href).toContain('/login?next=')
+    expect(decodeURIComponent(href ?? '')).toContain(`/claim?t=${jwt}`)
+    // The claim is still refused — no funnel mounted.
+    await expect(page.getByTestId('claim-funnel')).toHaveCount(0)
+  })
 })

src/pages/ClaimPage.test.tsx

@@ -314,6 +314,56 @@ describe('ClaimPage — submitting the email funnels into checkout', () => {
     expect(screen.queryByTestId('claim-funnel')).toBeNull()
   })
 
+  // account_exists recovery: when the api refuses the claim because the email
+  // already has an account, the user is told to log in — and must be given a
+  // control to do so. The CTA carries the claim token through ?next= so the
+  // claim resumes after sign-in. Detected via the api error's code/status.
+  it('renders a "Log in to claim" CTA on an account_exists (code) claim failure', async () => {
+    const jwt = buildClaimJWT()
+    const err = Object.assign(new Error('An account already exists for this email. Sign in instead.'), {
+      code: 'account_exists',
+      status: 409,
+    })
+    ;(api.claim as any).mockRejectedValue(err)
+    renderClaim(jwt)
+    fireEvent.change(screen.getByTestId('claim-email'), { target: { value: 'taken@example.com' } })
+    fireEvent.click(screen.getByTestId('claim-submit'))
+    await waitFor(() => {
+      expect(screen.getByTestId('claim-account-exists-login')).toBeTruthy()
+    })
+    const cta = screen.getByTestId('claim-account-exists-login') as HTMLAnchorElement
+    expect(cta.tagName).toBe('A')
+    // The login CTA carries the claim token through ?next= so the post-login
+    // flow can resume the claim.
+    const href = cta.getAttribute('href') ?? ''
+    expect(href).toContain('/login?next=')
+    expect(decodeURIComponent(href)).toContain(`/claim?t=${jwt}`)
+    // The claim was still refused — no funnel, no session minted.
+    expect(screen.queryByTestId('claim-funnel')).toBeNull()
+  })
+
+  it('does NOT render the login CTA on already_claimed (also 409, but code differs)', async () => {
+    const err = Object.assign(new Error('Link already used'), { code: 'already_claimed', status: 409 })
+    // already_claimed is ALSO 409 — but it must NOT offer the login CTA (the
+    // recovery is "ask your agent for a fresh link", not "log in"). The detection
+    // keys on the error CODE so the CTA is account_exists-specific, not 409-wide.
+    ;(api.claim as any).mockRejectedValue(err)
+    renderClaim()
+    fireEvent.change(screen.getByTestId('claim-email'), { target: { value: 'founder@example.com' } })
+    fireEvent.click(screen.getByTestId('claim-submit'))
+    await waitFor(() => expect(screen.getByTestId('claim-error').textContent).toContain('Link already used'))
+    expect(screen.queryByTestId('claim-account-exists-login')).toBeNull()
+  })
+
+  it('does NOT render the login CTA on a plain Error claim failure (no code)', async () => {
+    ;(api.claim as any).mockRejectedValue(new Error('Claim failed.'))
+    renderClaim()
+    fireEvent.change(screen.getByTestId('claim-email'), { target: { value: 'founder@example.com' } })
+    fireEvent.click(screen.getByTestId('claim-submit'))
+    await waitFor(() => expect(screen.getByTestId('claim-error').textContent).toContain('Claim failed'))
+    expect(screen.queryByTestId('claim-account-exists-login')).toBeNull()
+  })
+
   it('does not block the funnel if listResources fails', async () => {
     ;(api.claim as any).mockResolvedValue({
       ok: true, team_id: 't', user_id: 'u', session_token: 's',

src/pages/ClaimPage.tsx

@@ -108,6 +108,12 @@ export function ClaimPage() {
   const [explainerOpen, setExplainerOpen] = useState(true)
   const [checkoutErr, setCheckoutErr] = useState<string | null>(null)
   const [checkoutPlan, setCheckoutPlan] = useState<'hobby' | 'pro' | null>(null)
+  // account_exists recovery: when /claim is refused because the email already
+  // has an account (api emits error=account_exists, status 409/400), we keep
+  // the claim correctly refused but surface a login CTA so the user has a way
+  // to actually log in (previously the copy said "log in first" with no
+  // control). Tracks whether the last claim failure was that specific case.
+  const [accountExists, setAccountExists] = useState(false)
 
   useEffect(() => {
     if (!token) return
@@ -147,6 +153,7 @@ export function ClaimPage() {
 
   const submit = async () => {
     setErr(null)
+    setAccountExists(false)
     if (!email.trim()) {
       setErr('Email is required.')
       return
@@ -179,6 +186,16 @@ export function ClaimPage() {
     } catch (e: any) {
       setStage('error')
       setErr(e?.message ?? 'Claim failed. The link may have already been used.')
+      // The api refuses a claim whose email already has an account
+      // (error=account_exists, HTTP 409). The refusal is correct — we don't
+      // claim into an existing account from an unauthenticated form — but the
+      // user is told to "log in first" and needs a control to do so. Flag that
+      // specific case so the email screen renders a login CTA that carries the
+      // claim token through ?next= and resumes the claim after sign-in. We key
+      // on the error CODE, not the status: account_exists and already_claimed
+      // are BOTH 409 (api/internal/handlers/onboarding.go), and only the former
+      // is recoverable by logging in — already_claimed wants a fresh agent link.
+      setAccountExists(e?.code === 'account_exists')
     }
   }
 
@@ -509,6 +526,21 @@ export function ClaimPage() {
           </div>
         )}
 
+        {/* account_exists recovery: the claim was (correctly) refused because
+            this email already has an account. Surface a login CTA so the user
+            can actually sign in — carry the claim token through ?next= so the
+            claim resumes after login. */}
+        {accountExists && (
+          <Link
+            to={`/login?next=${encodeURIComponent(`/claim?t=${token}`)}`}
+            className="btn btn-primary"
+            data-testid="claim-account-exists-login"
+            style={{ width: '100%', justifyContent: 'center', marginBottom: 12 }}
+          >
+            Log in to claim →
+          </Link>
+        )}
+
         <button
           className="btn btn-primary"
           style={{ width: '100%', justifyContent: 'center' }}

src/pages/LoginPage.test.tsx

@@ -13,6 +13,8 @@ vi.mock('../api', async () => {
     setToken: vi.fn(),
     clearToken: vi.fn(),
     fetchMe: vi.fn(),
+    getToken: vi.fn(() => null),
+    completeCliSession: vi.fn(() => Promise.resolve({ ok: true })),
   }
 })
 
@@ -297,3 +299,55 @@ describe('LoginPage — D2 cli_session preservation', () => {
     expect(href).not.toContain('cli_session')
   })
 })
+
+// ─── D2: already-signed-in CLI device-flow completion ────────────────────
+// An ALREADY-authed user who runs `instant login` lands on /login?cli_session=
+// <id> with a live token. They never take the OAuth/magic-link return path
+// (LoginCallbackPage) that fires completeCliSession, so LoginPage itself must
+// fire it on mount and show a "return to your terminal" confirmation instead of
+// the sign-in form again.
+describe('LoginPage — D2 already-authed CLI completion', () => {
+  it('fires completeCliSession on mount when authed + cli_session present, shows confirmation', async () => {
+    ;(api.getToken as any).mockReturnValue('ink_live_session')
+    ;(window as any).location.search = '?cli_session=sess_authed'
+    renderAt('/login?cli_session=sess_authed')
+    await waitFor(() => expect(screen.getByTestId('cli-approved')).toBeTruthy())
+    expect(api.completeCliSession).toHaveBeenCalledTimes(1)
+    expect(api.completeCliSession).toHaveBeenCalledWith('sess_authed')
+    // The terminal-return confirmation replaces the sign-in form entirely.
+    expect(screen.getByTestId('cli-approved-ok').textContent).toContain('return to your terminal')
+    expect(screen.queryByTestId('oauth-github')).toBeNull()
+  })
+
+  it('does NOT fire completeCliSession when authed but no cli_session', async () => {
+    ;(api.getToken as any).mockReturnValue('ink_live_session')
+    ;(window as any).location.search = ''
+    renderAt('/login')
+    // Mount effect runs; without a cli_session it must be a no-op and the
+    // normal sign-in form renders.
+    await waitFor(() => expect(screen.getByTestId('oauth-github')).toBeTruthy())
+    expect(api.completeCliSession).not.toHaveBeenCalled()
+    expect(screen.queryByTestId('cli-approved')).toBeNull()
+  })
+
+  it('does NOT fire completeCliSession when cli_session present but NOT authed (fresh-login path)', async () => {
+    ;(api.getToken as any).mockReturnValue(null)
+    ;(window as any).location.search = '?cli_session=sess_fresh'
+    renderAt('/login?cli_session=sess_fresh')
+    // A signed-out user's cli_session rides through return_to to the callback
+    // page — LoginPage must NOT complete it here; it shows the sign-in form.
+    await waitFor(() => expect(screen.getByTestId('oauth-github')).toBeTruthy())
+    expect(api.completeCliSession).not.toHaveBeenCalled()
+  })
+
+  it('surfaces a non-blocking failure note when completion fails', async () => {
+    ;(api.getToken as any).mockReturnValue('ink_live_session')
+    ;(api.completeCliSession as any).mockResolvedValue({ ok: false })
+    ;(window as any).location.search = '?cli_session=sess_dead'
+    renderAt('/login?cli_session=sess_dead')
+    await waitFor(() => expect(screen.getByTestId('cli-approved-failed')).toBeTruthy())
+    // Still confirms the user is signed in; points them back at the CLI.
+    expect(screen.getByTestId('cli-approved-failed').textContent).toContain('signed in')
+    expect(screen.getByTestId('cli-approved-failed').textContent).toContain('instant login')
+  })
+})

src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Brand } from '../components/Common'
-import { setToken, clearToken, fetchMe } from '../api'
+import { setToken, clearToken, fetchMe, getToken, completeCliSession } from '../api'
 import { postAuthDestination } from '../lib/postAuthDestination'
 
 const OAUTH_API_BASE_DEFAULT = 'https://api.instanode.dev'
@@ -56,6 +56,43 @@ export function LoginPage() {
   const [emailSent, setEmailSent] = useState(false)
   const [emailErr, setEmailErr] = useState<string | null>(null)
 
+  // D2 — already-signed-in CLI device-flow completion.
+  //
+  // When a developer who is ALREADY authenticated runs `instant login`, the
+  // CLI opens /login?cli_session=<id> and polls. The fresh-OAuth/magic-link
+  // path completes the device flow in LoginCallbackPage (it POSTs
+  // /auth/cli/{id}/complete after sign-in) — but an already-authed user never
+  // takes that path: they land directly on /login with a live token and would
+  // otherwise be shown the sign-in form again, never firing the completion.
+  // So here, when BOTH a token exists AND cli_session is present, we fire the
+  // SAME completion path (completeCliSession) immediately and show a terminal-
+  // return confirmation instead of the sign-in form. Mirrors LoginCallbackPage:
+  // same function, best-effort (completeCliSession swallows its own errors), and
+  // a failure surfaces a note but does NOT hard-block.
+  const [cliApproved, setCliApproved] = useState<null | 'ok' | 'failed'>(null)
+  // Ref guard so completeCliSession fires EXACTLY once. React StrictMode (and
+  // any fast remount) double-invokes mount effects in dev; the server side is
+  // idempotent, but firing one POST keeps the behaviour deterministic and
+  // avoids a duplicate device-flow completion. We deliberately do NOT abort the
+  // state update on effect cleanup: under StrictMode the first pass's cleanup
+  // fires before the async resolves, and gating on a per-pass `cancelled` flag
+  // (combined with the fire-once ref preventing the second pass from re-firing)
+  // would drop the result entirely and never render the confirmation. A
+  // setState after unmount is a no-op in React 19, so firing once and always
+  // committing the outcome is correct here.
+  const cliFiredRef = useRef(false)
+  useEffect(() => {
+    const cli = readCliSession()
+    // Only the already-authed path runs here. A fresh-login user has no token
+    // yet; their cli_session rides through return_to to LoginCallbackPage.
+    if (!cli || !getToken() || cliFiredRef.current) return
+    cliFiredRef.current = true
+    void (async () => {
+      const { ok } = await completeCliSession(cli)
+      setCliApproved(ok ? 'ok' : 'failed')
+    })()
+  }, [])
+
   // sendMagicLink — POST /auth/email/start. Extracted from submitEmail so the
   // "Resend" affordance in the sent-confirmation state (F4) can re-fire the
   // exact same request without duplicating the fetch + error handling.
@@ -130,15 +167,72 @@ export function LoginPage() {
       navigate(dest, { replace: true })
     } catch (e: any) {
       clearToken()
-      setErr(
-        e?.status === 401
-          ? 'Token rejected. Mint a fresh PAT or use the claim link from your agent.'
-          : `Couldn't reach the API: ${e?.message ?? 'unknown error'}`,
-      )
+      const rejected = 'Token rejected. Mint a fresh PAT or use the claim link from your agent.'
+      const unreachable = `Couldn't reach the API: ${e?.message ?? 'unknown error'}`
+      setErr(e?.status === 401 ? rejected : unreachable)
       setBusy(false)
     }
   }
 
+  // D2 — already-authed CLI approval confirmation. The user came from a
+  // terminal (they ran `instant login`); don't silently drop them into the
+  // dashboard. Show a clear "return to your terminal" screen. On a completion
+  // failure we still confirm they're signed in and tell them to retry the CLI
+  // (completeCliSession never throws, so this is the only failure surface).
+  if (cliApproved !== null) {
+    return (
+      <div className="auth-shell">
+        <div className="auth-card" data-testid="cli-approved" style={{ maxWidth: 480 }}>
+          <div style={{ marginBottom: 28 }}>
+            <Brand />
+          </div>
+          {cliApproved === 'ok' ? (
+            <>
+              <h1>CLI session approved.</h1>
+              <div
+                role="status"
+                data-testid="cli-approved-ok"
+                style={{
+                  marginTop: 16,
+                  padding: '10px 12px',
+                  borderLeft: '2px solid var(--accent)',
+                  fontSize: 13,
+                  fontFamily: 'var(--font-mono)',
+                  color: 'var(--text)',
+                  lineHeight: 1.6,
+                }}
+              >
+                ✓ Your CLI session is approved — return to your terminal. You can
+                close this tab.
+              </div>
+            </>
+          ) : (
+            <>
+              <h1>Couldn't approve the CLI session.</h1>
+              <div
+                role="alert"
+                data-testid="cli-approved-failed"
+                style={{
+                  marginTop: 16,
+                  padding: '10px 12px',
+                  borderLeft: '2px solid var(--rose)',
+                  fontSize: 13,
+                  fontFamily: 'var(--font-mono)',
+                  color: 'var(--text)',
+                  lineHeight: 1.6,
+                }}
+              >
+                You're signed in, but we couldn't link this browser to your CLI
+                session — it may have expired. Re-run <code style={{ color: 'var(--accent)' }}>instant login</code> in
+                your terminal to get a fresh link.
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="auth-shell">
       <div className="auth-card">