feat: Frontend platform linking page (/link/{token})

[Bentlybro]

Summary

Adds the user-facing page that completes the platform bot account linking flow.

Stacked on: #12618 → #12615

The flow

1. User messages the CoPilot bot on Discord/Telegram/Slack
2. Bot detects they're not linked → sends: Link your account: https://platform.agpt.co/link/{token}
3. User clicks the link → this page
4. If not logged in → redirected to login with ?next=/link/{token}
5. Page shows: "Connect your Discord account to AutoGPT"
6. User clicks "Link account"
7. Page calls POST /api/platform-linking/tokens/{token}/confirm
8. Success screen → user goes back to chat, bot recognizes them

Implementation

• /app/(no-navbar)/link/[token]/page.tsx — standalone page, no main nav
• Reuses AuthCard, Button, Text, Link components (matches login/signup style)
• State machine: loading → not-authenticated / ready → linking → success / error
• Handles: expired tokens, already-used tokens, already-linked accounts, auth redirects

Screenshots

Page matches the existing login/signup card layout — same AuthCard component, same spacing.

States

State	What the user sees
Loading	Spinner + "Verifying link..."
Not authenticated	"Sign in to continue" button → redirects to login
Ready	"Connect your [platform] account" + Link button
Linking	Spinner + "Connecting your accounts..."
Success	✅ "Account linked! You can close this page."
Error	❌ Error message + "Ask the bot for a new link"

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c8d2f462-a13f-4a6f-95f2-6f798b6d1d30

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/platform-link-frontend

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Bentlybro]

/review

[autogpt-pr-reviewer]

Queued a review for PR #12624 at ef89528.

[autogpt-pr-reviewer]

All 8 specialists have reported. Compiling the final verdict now.

---

PR #12624 — feat: Frontend platform linking page (/link/{token})
Author: Bentlybro | Files: +autogpt_platform/frontend/src/app/(no-navbar)/link/[token]/page.tsx (+290)

🎯 Verdict: REQUEST_CHANGES

What This PR Does

Adds a new frontend page at /link/{token} that lets users connect external chat platform accounts (Discord, Telegram, Slack, etc.) to their AutoGPT account. A bot on the external platform generates a unique token URL; the user clicks it, signs in if needed, confirms the link, and gets a success screen. This is a frontend-only PR — the backend API endpoints are expected from stacked PRs (#12618, #12615).

Specialist Findings

🛡️ Security ⚠️ — No critical vulnerabilities in this PR's code. Auth uses Bearer token (CSRF-safe), React auto-escapes all rendered data (XSS-safe), and server-generated UUID tokens prevent injection. However:

• ⚠️ page.tsx:183 — Signup next param not URL-encoded while login URL at :170 correctly uses encodeURIComponent. Inconsistent and fragile — if token format ever changes, signup redirects break.
• ⚠️ Pre-existing open redirect in signup — signup/useSignupPage.ts doesn't validate the next parameter (unlike login/useLoginPage.ts which checks startsWith("/") && !startsWith("//")). Not introduced by this PR but exposed by it.
• ℹ️ Unauthenticated token status endpoint — GET /tokens/{token}/status reveals token state (pending/expired/linked) without auth. Low risk given UUID entropy, but violates least-privilege.

🏗️ Architecture ⚠️ — Route placement under (no-navbar) is correct. LinkState discriminated union is a clean pattern. But the PR bypasses the established API client pattern:

• ⚠️ page.tsx:45,95 — Raw fetch() instead of generated React Query hooks. The codebase has orval-generated hooks for these exact endpoints (useGetPlatformLinkingCheckIfALinkTokenHasBeenConsumed, usePostPlatformLinkingConfirmALinkTokenUserMustBeAuthenticated). The sibling share/[token]/page.tsx uses the generated hooks. Raw fetch duplicates API paths, skips the customMutator auth flow (including impersonation headers), and loses React Query caching/retry.
• ⚠️ page.tsx:91-93 — Direct supabase.auth.getSession() for auth instead of the customMutator that the rest of the codebase uses. If auth strategy changes (e.g., impersonation), this page silently breaks.
• ⚠️ page.tsx:11-19 — PLATFORM_INFO is dead weight during the check flow. The status endpoint doesn't return platform info (acknowledged in comment at :70), so platform is always "your platform" until after confirm. The icon field is never read anywhere.

⚡ Performance ⚠️ — No hot-path or O(n) concerns for this single-page component, but two real issues:

• ⚠️ page.tsx:82 — useEffect depends on [token, user] — user from useSupabaseStore changes reference on every Supabase auth event (token refresh, session restore), causing redundant checkToken() API calls. Should split into two effects: one for token validation ([token]), one for auth state.
• ⚠️ No AbortController — If the effect re-fires, concurrent fetches race and the loser can overwrite the winner's state.
• ℹ️ "use client" on entire page — Token validation could be a Server Component (eliminating the loading spinner for error/expired states entirely).

🧪 Testing ❌ — Zero tests included. 290 lines of new client-side logic with multiple state transitions, two API calls, and auth gating — completely untested. The codebase has established patterns for both unit tests (Vitest + RTL, e.g. build/__tests__/CustomNode.test.tsx) and E2E tests (Playwright, e.g. signin.spec.ts). At minimum, unit tests should cover: loading state, invalid/expired token, already-linked token, unauthenticated → redirect, authenticated → ready, link success, link failure, network errors. ~20 test cases identified.

• ⚠️ page.tsx:34 — params.token as string unsafe cast — useParams() returns string | string[]; no test validates this assumption.
• ⚠️ page.tsx:82 — Silent no-op if supabase is null — handleLink returns without user feedback.

📖 Quality ⚠️ — B+ readability. Clean component structure, good naming conventions matching codebase (PlatformLinkPage, LoadingView, etc.). Issues:

• ⚠️ page.tsx:148-149,224-225 — Hand-rolled spinner instead of existing <LoadingSpinner> component from @/components/atoms/LoadingSpinner/LoadingSpinner (used by logout/page.tsx).
• ⚠️ page.tsx:214 — bg-slate-50 hardcoded color — Won't respect dark mode. Codebase uses semantic tokens (bg-muted, bg-background). Same issue at :249 (bg-green-100) and :262 (bg-red-100).
• ⚠️ page.tsx:24 — platformUsername in ready state is dead code — Never populated by checkToken(), so ReadyView's conditional JSX (:201-206) can never trigger.
• ⚠️ page.tsx:30 — Uses useSupabaseStore directly instead of the useSupabase wrapper hook that most other pages use.
• ℹ️ Bare catch blocks (:77,121) match existing codebase style but swallow errors silently.

📦 Product ⚠️ — Core flow structure is sound, but several UX gaps:

• ⚠️ "your platform" placeholder text (page.tsx:73-76) — User sees "Connect your your platform account" because the status endpoint doesn't return platform info. Poor UX for the confirmation screen.
• ⚠️ No retry for transient errors — Error view tells users to go back to chat for a new link, even for network failures. A "Try again" button would save unnecessary round-trips.
• ⚠️ Success is a dead end — No "Go to Dashboard" link, no auto-close, just "you can close this page."
• ⚠️ Auth flash — user transitions undefined → null → User on mount, causing a brief flash through loading → not-authenticated → ready.
• ℹ️ Accessibility: spinners lack role="status"/aria-label, emoji status indicators (✅❌) won't translate for screen readers.

📬 Discussion ✅ — CI is clean: 10/11 checks passing, only chromatic skipped (expected for draft). This is a draft PR with zero human reviews submitted and no requested reviewers. It's stacked on #12618 → #12615 (base branch feat/copilot-bot-service, not main). CodeRabbit auto-skipped review due to draft status. autogpt-pr-reviewer[bot] queued a review but hasn't posted results yet.

🔎 QA ⚠️ — Error states and routing verified live. Happy path (valid token → ready → link → success) could not be tested because backend platform-linking API endpoints aren't available in the test environment (expected — this is frontend-only, stacked on backend PRs).

• ✅ Landing page renders correctly
• ✅ Signup flow works (fresh DB, qatest@example.com)
• ✅ /link/[token] route resolves with dynamic token param
• ✅ Invalid token shows "Link failed" with user-friendly error message
• ✅ Missing token (/link/) returns proper 404
• ✅ No console crashes or unhandled rejections
• ⚠️ Dark mode bg-slate-50 concern confirmed visually
• ❌ Ready/linking/success states untested (no backend)

Blockers (Must Fix)

1. page.tsx:45,95 — Use generated React Query hooks instead of raw fetch() — The orval-generated hooks exist for both endpoints. Raw fetch duplicates API paths, bypasses the customMutator auth flow (breaking impersonation support), and loses caching/retry. This is the single biggest architectural issue — it introduces a second API access pattern. (Flagged by: Architect, Security, Quality)

2. page.tsx:183 — Missing encodeURIComponent on signup next param — Login URL at :170 correctly encodes; signup URL doesn't. Inconsistent and can break URL parsing. Fix: href={/signup?next=${encodeURIComponent(/link/${token})}} (Flagged by: Security, Quality, Product)

3. page.tsx:214,249,262 — Hardcoded colors break dark mode — bg-slate-50, bg-green-100, bg-red-100 won't adapt to dark theme. Use semantic tokens: bg-muted, bg-green-100/50 dark:bg-green-900/20, etc. (Flagged by: Quality, Product, QA — confirmed visually)

Should Fix (Follow-up OK)

1. page.tsx:148-149,224-225 — Use existing <LoadingSpinner> component instead of hand-rolled spinner divs. The logout/page.tsx already imports it. (Quality)

2. page.tsx:73-76 — "your platform" generic text — The ready state always shows "Connect your your platform account." Enrich the status endpoint to return platform name, or use the PLATFORM_INFO map with data from the status response. (Product, Architect)

3. page.tsx:37-82 — Split useEffect to avoid redundant API calls — Separate token validation ([token]) from auth-state reaction ([user]). Add AbortController for request cancellation. (Performance)

4. Zero test coverage — Add at minimum: loading state, invalid/expired token, auth redirect, link success/failure, network error unit tests. The codebase has established Vitest + RTL patterns to follow. (Testing)

5. page.tsx:24 — platformUsername dead code — Never populated, so ReadyView's conditional JSX can never render. Remove or wire up. (Quality)

6. page.tsx:11-19 — PLATFORM_INFO.icon never read — Remove dead icon field or use it. (Quality, Architect)

7. Error view lacks retry — Add a "Try again" button for transient network failures instead of forcing users to get a new token. (Product)

8. Accessibility — Add role="status" + aria-label to spinners, add aria-live regions for state transitions. (Product)

Risk Assessment

Merge risk: LOW — Single new page, no existing code modified, feature-gated behind token URL flow.
Rollback: EASY — Delete one file, no migrations, no shared state.

Note: This is a draft PR stacked on #12618 → #12615. No human reviews have been submitted yet. CI is green. The 3 blockers above are straightforward fixes (use generated hooks, encode URL, fix dark mode colors). Once addressed, this is a clean APPROVE.

REVIEW_COMPLETE
PR: #12624
Verdict: REQUEST_CHANGES
Blockers: 3

[Bentlybro]

/review

[autogpt-pr-reviewer]

Queued a review for PR #12624 at 79978d9.

[autogpt-pr-reviewer]

All 8 specialists have reported. Compiling the final verdict now.

---

PR #12624 — feat: Frontend platform linking page (/link/{token})
Author: Bentlybro | Requested by: ntindle | Files: +autogpt_platform/frontend/src/app/(no-navbar)/link/[token]/page.tsx (+290)

🎯 Verdict: REQUEST_CHANGES

What This PR Does

Adds a new frontend page at /link/{token} that lets users connect their chat platform identity (Discord, Telegram, Slack, etc.) to their AutoGPT account. A bot sends the user a unique link → they visit it → sign in if needed → click "Link account" → accounts are connected. The page has 6 states: loading, not-authenticated, ready, linking, success, and error. This is part of the CoPilot bot service feature stack (#12624 → #12618 → #12615).

Specialist Findings

🛡️ Security ⚠️ — One encoding inconsistency and minor info-leak concerns.

• ⚠️ Missing encodeURIComponent on signup redirect (page.tsx:178): Login URL correctly encodes with encodeURIComponent, but signup link uses raw interpolation /signup?next=/link/${token}. A crafted token with &, #, or ? could manipulate the query string. If the signup handler doesn't validate next, this becomes an open redirect vector for phishing.
• ⚠️ Token path interpolation without validation (page.tsx:34,49,101): Token from useParams() is interpolated directly into fetch URLs. A token with ../ could alter the API path. Backend must enforce format, but client-side regex guard would add defense-in-depth.
• ⚠️ Token enumeration (page.tsx:49-73): Status endpoint returns differentiated linked/expired/pending vs 404 for invalid — allows brute-force discovery of valid tokens.
• ✅ Auth pattern is correct — Bearer token via Authorization header (not cookies), so CSRF is not a concern. No secrets in client code.

🏗️ Architecture ⚠️ — Raw fetch bypasses the project's generated API client; confirmed by both Architect and Discussion (bot reviewer flagged same issue).

• ⚠️ Bypasses generated orval hooks (page.tsx:46-48, 89-98): The codebase already has auto-generated hooks at src/app/api/__generated__/endpoints/platform-linking/platform-linking.ts — useGetPlatformLinkingCheckIfALinkTokenHasBeenConsumed and usePostPlatformLinkingConfirmALinkTokenUserMustBeAuthenticated. Using raw fetch skips the customMutator that handles auth injection, error normalization, and base URL resolution. The sibling share/[token]/page.tsx uses generated hooks — this page should follow suit.
• ⚠️ Hardcoded PLATFORM_INFO map (page.tsx:11-19): Duplicates backend platform knowledge. Falls back to raw string when unknown platform appears, losing the icon. Should come from the API or live in a shared constants file.
• ⚠️ No layout.tsx for the route: Sibling share/[token] has its own layout with <title> and robots: noindex. This token-based URL should not be search-indexed either.
• ✅ Route group placement in (no-navbar) is correct and consistent with existing patterns.

⚡ Performance ⚠️ — Double-fetch on mount and no cleanup; cross-referenced with QA's findings.

• ⚠️ Double-fetch on auth state settle (page.tsx:82): useEffect depends on [token, user]. Supabase emits user as null → User on load, causing the effect to fire twice — wasted fetch + visible UI flicker (loading → not-authenticated → loading → ready).
• ⚠️ No AbortController (page.tsx:42-81): Race condition if user changes during the fetch — stale response can overwrite current state.
• ⚠️ No double-click protection (page.tsx:197): Button can fire handleLink multiple times before React re-renders to the "linking" spinner state. Should disable button or use a useRef guard.
• ✅ Bundle impact is negligible — code-split by Next.js, only small UI atom imports.

🧪 Testing ❌ — Zero test coverage on 290 lines of interactive code.

• ❌ No tests added — 0% coverage on a component with 6 states, 2 API calls, auth integration, and multiple error paths.
• The codebase has established patterns: Vitest + React Testing Library, test-utils.tsx with provider wrappers, mock-supabase-request.tsx for auth mocking, and Playwright e2e specs.
• 12 distinct test cases needed: token valid/invalid/expired/linked states, auth/unauth flows, confirm success/failure, network errors, double-click, session expiry.

📖 Quality ⚠️ — Several dead code paths, dark mode gaps, and accessibility issues.

• ⚠️ Dead code: icon field never read (page.tsx:11-19): Every PLATFORM_INFO entry has icon but no component renders it.
• ⚠️ Dead code: platformUsername never populated (page.tsx:24): LinkState.ready has platformUsername? but checkToken() never sets it. ReadyView renders the username branch but it's unreachable.
• ⚠️ Dark mode broken (page.tsx:213,249,262): bg-slate-50, bg-green-100, bg-red-100 are hardcoded light colors with no dark: variants — will render as jarring bright boxes in dark mode. Flagged by Quality, Product, and QA independently.
• ⚠️ No aria-live region or focus management on state transitions — screen readers won't announce loading/error/success state changes.
• ✅ Discriminated union LinkState is well-typed. Component decomposition is appropriate for 290 lines.

📦 Product ⚠️ — Core UX issue: platform name never shown in the confirmation step.

• ⚠️ "Connect your your platform account" (page.tsx:73-75): Status endpoint doesn't return platform info, so the ready state always shows the literal string "your platform" — confusing and reduces trust. Users from Discord should see "Connect your Discord account". The PLATFORM_INFO map exists but is only used after successful linking, not when it matters most.
• ⚠️ No "Cancel" / "Not you?" option (page.tsx:189-208): If logged into the wrong account, no way to switch without manually navigating to logout.
• ⚠️ No retry button in error state (page.tsx:236-257): For transient network errors, users must go back to their chat for a new link — a "Try again" button would reduce friction.
• ✅ Login redirect with ?next= works correctly — useLoginPage.tsx validates and preserves the param.

📬 Discussion ⚠️ — Draft PR with bot-flagged blockers unaddressed; zero human reviews.

• ⚠️ Bot review REQUEST_CHANGES at ef89528 with 3 blockers (raw fetch, missing encodeURIComponent, dark mode) + 8 suggestions — author pushed 79978d9 and re-triggered /review without commenting on what was fixed.
• ⚠️ Zero human reviewers requested or self-assigned. Still a draft PR.
• ✅ CI: 14/15 checks passing (only chromatic skipped — expected for draft).
• ✅ PR description is well-written with a clear feature walkthrough and state table.
• ℹ️ Stacked on #12618 → #12615 (base: feat/copilot-bot-service), no linked issues or milestone.

🔎 QA ❌ — Critical: API routing is completely broken. The page cannot function.

• 🔴 All API calls 404 — The page fetches from /api/platform-linking/tokens/{token}/status which resolves to http://localhost:3000/api/platform-linking/... (the Next.js server). No Next.js API route exists at this path, and no rewrite/proxy is configured in next.config.mjs. The actual backend is at http://localhost:8006/api/platform-linking/.... Every token — valid or invalid — always hits the error state. The page can never reach "not-authenticated", "ready", or "success" states.
• ✅ UI components render cleanly — layout, styling, AuthCard integration, mobile responsiveness all look correct.
• ✅ Backend health confirmed — GET http://localhost:8006/api/platform-linking/tokens/test-token/status returns proper JSON {"detail": "Token not found"}.
• ⚠️ Dark mode bg-slate-50 confirmed visually.

Evidence:

Blockers (Must Fix)

1. page.tsx:46,99 — API routing broken: Fetch calls to /api/platform-linking/... 404 on the Next.js frontend server. Need either a Next.js API route proxy, a next.config.mjs rewrite, or use the generated orval hooks (which already handle base URL resolution). This is the root cause of all functional failures. (Flagged by: QA 🔴, Architect ⚠️, Discussion ⚠️)

2. page.tsx:178 — Missing encodeURIComponent on signup next param: Login URL encodes correctly, signup URL doesn't. Inconsistency that can break the redirect flow and potentially enable open redirect. (Flagged by: Security 🟠, Product 🔴, Quality ⚠️, Discussion ⚠️)

3. page.tsx:46-48,89-98 — Raw fetch instead of generated orval hooks: Bypasses the project's API client, auth injection, error normalization, and base URL resolution. This is likely the cause of Blocker #1 — the generated hooks know the backend URL; raw fetch doesn't. (Flagged by: Architect ❌, Discussion ⚠️)

Should Fix (Follow-up OK)

1. page.tsx:73-75 — "your platform" placeholder in ready/success states: Status endpoint doesn't return platform info, making the confirmation screen generic and trust-reducing. Either enrich the API response or add a detail-fetch endpoint. (Flagged by: Product ⚠️, Quality ⚠️)

2. page.tsx:82 — useEffect dependency on [token, user] causes double-fetch + flicker: Split the effect or gate on auth settling to prevent wasted requests and visible UI jitter on every page load. (Flagged by: Performance ⚠️)

3. page.tsx:42-81 — No AbortController for fetch cleanup: Race condition on rapid auth state changes. Add cleanup return in useEffect. (Flagged by: Performance ⚠️)

4. page.tsx:197 — No double-click protection on "Link account" button: Add disabled state or useRef guard. (Flagged by: Performance ⚠️, Testing ⚠️)

5. page.tsx:213,249,262 — Hardcoded light colors break dark mode: bg-slate-50, bg-green-100, bg-red-100 need dark: variants. (Flagged by: Quality ⚠️, Product ⚠️, QA ⚠️)

6. No tests: 290 lines of interactive code with 0% coverage. At minimum need unit tests for the 6 state transitions and 2 API paths. (Flagged by: Testing ❌)

7. No layout.tsx for robots: noindex and proper <title>. (Flagged by: Architect ⚠️)

8. page.tsx:189-208 — No "Not your account?" / cancel option in ready state. (Flagged by: Product ⚠️)

Risk Assessment

Merge risk: HIGH | Rollback: EASY (single new file, no modifications to existing code)

The page is non-functional as written — API calls always 404 because there's no routing from the Next.js frontend to the backend for /api/platform-linking/ paths. Using the project's generated orval hooks (Blocker #3) would likely fix Blocker #1 automatically, since those hooks already resolve the correct backend URL. The UI shell is well-constructed and mobile-responsive, but can't be evaluated end-to-end until routing is fixed.

---

REVIEW_COMPLETE
PR: #12624
Verdict: REQUEST_CHANGES
Blockers: 3

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.