[kentcdodds]

Why

User testing (screen recording + Discord feedback from JacobMGEvans) surfaced two recurring issues:

1. People open Integrations expecting a marketplace of built-in providers with "Connect" buttons. Kody intentionally has none — you create your own OAuth apps ("bring your own keys") with your agent guiding you — but nothing in the product explains that.
2. The flat top nav (Secrets / Integrations / Package tokens / Connectors / MCP servers as top-level peers) overwhelmed new users and pulled them away from onboarding prematurely.

What changed

• "Bring your own keys" explainer (byok-explainer.tsx): shared pitch card with a You → your own app → provider diagram and a Kody koala illustration (generated from the official Kody character reference). Shown on the integrations page and onboarding.
• Integrations page redesign: clean "Integrations" title, user-language description, BYOK explainer, and a "Set up with your agent" catalog — familiar provider cards (GitHub, Google, Slack, Spotify, X, Discord, plus "Something else") where each card copies a tailored agent setup prompt instead of starting an OAuth flow.
• Onboarding: new "Bring your own keys" section after the two setup steps, so the expectation is preempted before people ever reach Integrations.
• Nav restructure (app.tsx): space-between layout — logo + Community on the left; Admin, username, Log out on the right. Account-specific links removed from the top nav.
• Account subnav (AccountPageHeader): all /account/* pages now share an "Account sections" subnav (Overview, Secrets, Integrations, Package tokens, Connectors, MCP servers) mirroring the admin pages pattern. Page titles are clean section names instead of raw email headings.
• Shared primitives: CopyTextButton (dedupes clipboard + "Copied" feedback logic, adopted by onboarding), integration-provider-catalog.ts (provider suggestions + prompt builders), new Kody illustrations in public/images/.

Demo

Testing

• npm run validate — all six checks green (format, lint, typecheck, unit, Playwright E2E, MCP E2E)
• Manual GUI testing of nav, account subnav, integrations page, and onboarding via seeded local dev server; clipboard content of the copy-prompt buttons verified by pasting
• ssr-render.node.test.ts and social-login.spec.ts updated for the clean "Account" page title

System recap — extends one primitive (app-ui) (medium risk)

Mode: recap · Base: main @ 90a394b4 · Head: 5002baae

Classification: extends — reshapes the browser app's navigation and account
information architecture; no other primitive's behavior or contract changes.
No primitives added; primitives.yaml unchanged.

Primitives touched

Primitive	Group	Impact
app-ui	surfaces	extends — top nav restructured (space-between, account entry on the right), account pages nested under a shared subnav, integrations/onboarding pages gain "bring your own keys" content and copy-prompt catalog

System map

All changes stay inside the browser app; the gray nodes are referenced by new
page copy/prompts only — their code paths are untouched.

Legend: green = composes (wiring only) · amber = extended by this PR · red =
new primitive · gray = context (unchanged, included only when an edge crosses
it).

flowchart LR
	appUi["app-ui<br/>Browser app (Remix 3)"]:::extended
	mcpServer["mcp-server<br/>MCP endpoint (/mcp)"]:::untouched
	secrets["secrets<br/>Secret references"]:::untouched
	appUi -->|"onboarding copy links /mcp URL (unchanged)"| mcpServer
	appUi -->|"provider prompts describe OAuth integration setup (text only)"| secrets
	classDef touched fill:#1a7f37,color:#fff
	classDef extended fill:#9a6700,color:#fff
	classDef added fill:#cf222e,color:#fff
	classDef untouched fill:#57606a,color:#fff

Loading

Change flow

flowchart LR
	nav["Top nav<br/>logo + Community | Admin? + user + logout"]:::extended
	account["/account pages<br/>AccountPageHeader subnav"]:::extended
	integrations["/account/integrations<br/>BYOK explainer + provider prompt cards"]:::extended
	onboarding["/onboarding<br/>BYOK section + shared CopyTextButton"]:::extended
	nav -->|"username link (right side)"| account
	account -->|"Account sections pills"| integrations
	integrations -->|"same renderByokExplainer primitive"| onboarding
	classDef extended fill:#9a6700,color:#fff

Loading

Before / after

Area	Before	After
Top nav (logged in)	flat row: user, Secrets, Integrations, Package tokens, Connectors, MCP servers, Admin, Log out	left: logo + Community · right: Admin?, user, Log out
Account page titles	${email} integrations etc.	clean names ("Integrations") + shared "Account sections" subnav
Integrations empty state	"No integrations yet" card	BYOK pitch card + provider catalog with copyable agent setup prompts
Onboarding	2 setup steps	2 setup steps + "Bring your own keys" explainer

  

Summary by CodeRabbit

• New Features

  • Added account section sub-navigation to streamline account settings navigation.
  • Introduced a reusable copy-to-clipboard button with “Copied/failed” feedback.
  • Added a guided integrations setup flow with provider suggestions and one-click prompt copying.
  • Added a “Bring your own keys” explainer with selectable visuals.

• Improvements

  • Simplified signed-in navigation and standardized account page headers with consistent, fixed titles.

• Tests

  • Updated UI assertions for the account page heading and related accessibility label.

[coderabbitai]

📝 Walkthrough

Walkthrough

Account pages now share section navigation and fixed headers. Integrations provide provider setup prompts and BYOK guidance, with reusable clipboard controls adopted by onboarding. Global navigation is reorganized for responsive grouped links, and account-page assertions cover the new markup.

Changes

Account and integration experience

Layer / File(s)	Summary
Shared account headers and route migration packages/worker/client/routes/account-management-components.tsx, packages/worker/client/routes/account*.tsx, packages/worker/src/app/ssr-render.node.test.ts, e2e/social-login.spec.ts	Adds AccountPageHeader with active account-section navigation and migrates account routes away from email-based headers and state.
Integration setup catalog and explainer packages/worker/client/routes/integration-provider-catalog.ts, packages/worker/client/routes/byok-explainer.tsx, packages/worker/client/routes/account-integrations.tsx, packages/worker/public/images/*	Adds provider metadata, setup prompt builders, BYOK explanation content, provider cards, custom integration setup, and supporting images.
Reusable copy interaction and onboarding adoption packages/worker/client/copy-text-button.tsx, packages/worker/client/routes/onboarding.tsx	Adds clipboard status handling through CopyTextButton and replaces onboarding’s duplicated copy-button logic.
Global navigation layout packages/worker/client/app.tsx	Groups navigation responsively and limits authenticated navigation to account, optional admin, and logout actions.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AccountIntegrations
  participant IntegrationProviderCatalog
  participant CopyTextButton
  participant Clipboard
  User->>AccountIntegrations: Select provider setup
  AccountIntegrations->>IntegrationProviderCatalog: Build setup prompt
  IntegrationProviderCatalog-->>AccountIntegrations: Return prompt text
  AccountIntegrations->>CopyTextButton: Render prompt
  User->>CopyTextButton: Click copy
  CopyTextButton->>Clipboard: Write prompt text
  Clipboard-->>CopyTextButton: Return success or failure
  CopyTextButton-->>User: Show transient copy status

Loading

Possibly related PRs

• kentcdodds/kody#550: Also modifies the integrations route and authenticated navigation.
• kentcdodds/kody#608: Overlaps with account route loader and email-state handling.
• kentcdodds/kody#649: Also modifies account headers, navigation, and remote connectors.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 9.09% which is insufficient. The required threshold is 80.00%.	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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the two main changes: BYOK onboarding/integrations and the new calmer account navigation subnav.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/byok-nav-restructure-0bc2

---

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

[github-actions]

🔎 Preview deployed: https://kody-pr-705.kody-a99.workers.dev

Worker: kody-pr-705
D1: kody-pr-705-db
KV: kody-pr-705-oauth-kv

Mocks:

• cloudflare: https://kody-pr-705-mock-cloudflare.kody-a99.workers.dev/__mocks (kody-pr-705-mock-cloudflare)