fix(web): align connect and pairing pages with app styling

[flamboh]

Note

🤖 GPT-6 on behalf of Oliver

Problem

Connect and pairing pages use decorative banners and cards unlike the app. Pairing errors also lack an accessible association with the token input.

Fix

Use a plain variant of the shared standalone-page layout with the sidebar's branding. Apply the same styling to the server's loopback completion page. Keep pairing errors in a stable live region and associate them with the invalid input.

Retargeted to t3code/codex-turn-mapping because this includes server-rendered HTML. The port preserves current loopback and device authorization. The old hosted callback, copy-code, and callback sign-out changes were dropped because #11794 removed that flow. Sidebar branding retains the current cap-height sizing.

UI Changes

These screenshots are the original design evidence and predate the v2 port. The former hosted callback page is no longer part of the change. No fresh browser verification was run.

Before

After

Validation

Thirteen focused Connect/pairing tests, web typecheck, targeted lint, formatting, and diff checks pass. Lint reports existing ref-access warnings. Clerk's production sign-in flow was not verified locally.

Original implementation by Claude Fable 5.1 in Claude Code. Reviewed and ported to v2 by GPT-6 using Codex.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a cross-surface redesign of production connect and pairing authorization pages, including shared auth components, Clerk account labeling, and the server-rendered loopback completion page. Changes under the web auth directory require human review even though the existing pairing and authorization flows are preserved.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 6e84343f-688d-46aa-bca6-9ed9dd62994e

📥 Commits

Reviewing files that changed from the base of the PR and between 68f4da95850c7153bd19a2bd072b3a14687fd2af and c1649f97e854070465288853cff456984967c84d.

📒 Files selected for processing (1)

• apps/web/src/components/cloud/ConnectCliAuthSurface.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 4 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds shared Code branding and environment pills, consolidates pairing surfaces, updates CLI authorization states and callback error handling, and redesigns the loopback authorization completion page.

Changes

Authentication branding and flows

Layer / File(s)	Summary
Shared authentication branding apps/web/src/components/T3Wordmark.tsx, apps/web/src/components/auth/AuthSurfaceShell.tsx, apps/web/src/components/sidebar/SidebarChrome.tsx	Adds reusable Code wordmark and environment pill components. Updates the authentication shell and sidebar to use them.
Pairing surface consolidation apps/web/src/components/auth/PairingRouteSurface.tsx	Routes pairing states through the shared shell and message components. Updates environment wording, accessibility attributes, and authentication guidance.
CLI authorization flow apps/web/src/cloud/connectCliAuth.ts, apps/web/src/cloud/connectCliAuth.test.ts, apps/web/src/components/cloud/ConnectCliAuthSurface.tsx	Adds callback error parsing and tests. Updates authorization and callback states for cancellation, failure, sign-out, account display, and code copying.
Loopback authorization page apps/server/src/cloud/cliAuthHtml.ts	Replaces the gradient layout with a card layout using an inline Code wordmark, conditional stage pill, CSS variables, and dark-mode support.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CLI
  participant Browser
  participant ConnectCliCallbackSurface
  participant Clerk
  CLI->>Browser: Open authorization flow
  Browser->>ConnectCliCallbackSurface: Return callback URL
  ConnectCliCallbackSurface->>ConnectCliCallbackSurface: Read callback error
  ConnectCliCallbackSurface->>Clerk: Sign out on user action
  Clerk-->>ConnectCliCallbackSurface: Complete sign-out
  ConnectCliCallbackSurface-->>CLI: Display or copy authorization code

Loading

Merge Risk: ⚪ Minimal · up to c1649

The connect and pairing surfaces now use shared branding and clearer callback, cancellation, sign-out, and retry states. No concrete current-head merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 10.53% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 19 functions across 8 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main change: aligning the Connect and pairing pages with the application styling. It is concise and relevant, although it does not mention the related loopback page up…
Description check	✅ Passed	The description explains the problem, the fix, UI changes, screenshots, and validation results. It uses Problem and Fix headings instead of the template's What Changed and Why headings, and it omits t…

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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