fix(web): deslop, make connect and pairing pages look like the app

[flamboh]

Note

🤖 GPT-6 on behalf of Oliver

ELI5

Connect and pairing pages now match the app and explain what to do next.

Problem

The authorization and pairing pages used decorative banners and cards unlike the rest of the app. Failure messages gave little help, and pairing errors had no accessible association with the input.

Fix

• Use a flat auth card, with branding components shared by the sidebar. Apply the same styling to the server's loopback completion page.
• Explain terminal handoff and cancellation with fixed copy, without displaying URL-supplied error descriptions. Keep retry instructions visible after sign-out.
• Reserve space for pairing errors and associate them with the invalid input.

UI Changes

Before

After

---

Validation: all eight connectCliAuth tests, web typecheck, and targeted lint and formatting checks pass. The PR retains its original screenshots; this follow-up did not run browser verification. Clerk's production sign-in flow remains unverified locally.

Implemented with Claude Fable 5.1 in Claude Code. Reviewed and updated with GPT-6 and GPT-5.6 Luna in Codex.

Note

Redesign CLI auth and pairing pages into shared card layout

• Replaces illustrated full-screen auth surfaces with a compact bordered card layout via AuthSurfaceShell and AuthSurfaceMessage across connect, pairing, and hosted pairing pages in AuthSurfaceShell.tsx and PairingRouteSurface.tsx
• Adds shared T3CodeWordmark and EnvironmentStagePill components, adopted by the sidebar brand and the server-side loopback authorization HTML in cliAuthHtml.ts
• Adds OAuth callback error handling: readConnectCliCallbackError surfaces the error query param, and ConnectCliCallbackSurface distinguishes access_denied cancellations from other failures, adds a sign-out action, and shows a 10-minute terminal wait note
• Updates pairing guidance copy to differentiate desktop-app, token-only, and combined environments; removes the separate supported-methods info panel
• Behavioral Change: pairing pages no longer render the supported-methods informational panel; manual pairing token input now uses aria-describedby and aria-invalid with a persistent live error region instead of a conditional error box

^{Macroscope summarized c1649f9.}

Summary by CodeRabbit

• New Features

  • Added clearer sign-in and CLI connection screens with branded Code wordmarks and environment labels.
  • Improved CLI authorization flows with account context, command guidance, cancellation handling, sign-out, and copyable connection codes.
  • Added light and dark mode support to the authorization completion page.
  • Added inline pairing error messaging with improved accessibility states.

• Bug Fixes

  • Callback authorization errors are now detected and displayed appropriately.

• Style

  • Updated authentication, pairing, and sidebar surfaces with a simpler, consistent card-based design.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a cross-cutting redesign of production pairing and CLI authorization surfaces, including new callback handling and an account sign-out action, rather than only a visual cleanup. Authentication-sensitive files and one-time authorization-code flows are affected, so human review is needed.

^{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 68f4da9 and c1649f9.

📒 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

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.

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

🚥 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
Title check	✅ Passed	The title clearly describes the main change: cleaning up the web connect and pairing pages so they match the application style.
Description check	✅ Passed	The description explains what changed, why it changed, and includes before-and-after screenshots for the UI changes. It also documents validation results. The template Checklist section is not include…
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.

• 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.}