Skip to content

feat(vaults): 添加对 MCP OAuth Credential 的UI交互 - #215

Open
qifanlili wants to merge 1 commit into
mainfrom
feat/vault-mcp-oauth-credential-ui
Open

feat(vaults): 添加对 MCP OAuth Credential 的UI交互#215
qifanlili wants to merge 1 commit into
mainfrom
feat/vault-mcp-oauth-credential-ui

Conversation

@qifanlili

@qifanlili qifanlili commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator

目标:本 PR 仅为前端修改

摘要

  • 在 Vault「添加凭证」中新增 MCP OAuth 类型(保留 Static bearer / Environment variable)。
  • Connect:弹窗完成 OAuth;若已粘贴 Access token,则跳过弹窗,直接走已有API 创建 mcp_oauth(可选填写 Refresh)。
  • 三种鉴权类型。
  • 内置应用选择 或 自定义MCP URL

效果

image image image

测试计划

  • 创建 Vault → 进入详情并弹出首个凭证对话框;Skip 可关闭
  • 添加凭证 → MCP OAuth → Directory 选服或自定义 URL → 勾选确认 → Connect 对真实 OAuth MCP 打开弹窗
  • 粘贴 Access token → 出现可选 Refresh →「添加凭证」不走弹窗即可创建 mcp_oauth
  • Static bearer / Env 仍可用;所有类型均需勾选确认
  • 非 OAuth MCP(如 toolbox static bearer)点 Connect 应返回 discovery 失败(400),而不是 500
  • bun test src/features/managed-agents/resources/model.test.ts

Summary by CodeRabbit

  • New Features
    • Added MCP OAuth credential support, including server selection and optional client and refresh-token settings.
    • Added OAuth connection flows with popup handling, redirect support, and error feedback.
    • Added shared-credential acknowledgment and tailored create, edit, first-credential, skip, and save actions.
    • Newly created credential vaults can open credential setup automatically.
  • Improvements
    • Added validation for required OAuth fields and credential readiness.
    • Credential details now refresh after OAuth completion.
    • Improved password-field handling and autocomplete behavior.

@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4a73fbe4-975c-4768-a062-c589c2c224d0

📥 Commits

Reviewing files that changed from the base of the PR and between b13bd8b and 803fa22.

📒 Files selected for processing (8)
  • web/src/features/managed-agents/api.ts
  • web/src/features/managed-agents/components/common.tsx
  • web/src/features/managed-agents/resources/detail.tsx
  • web/src/features/managed-agents/resources/dialogs.tsx
  • web/src/features/managed-agents/resources/entities.tsx
  • web/src/features/managed-agents/resources/model.test.ts
  • web/src/features/managed-agents/resources/model.tsx
  • web/src/features/managed-agents/types.ts
🚧 Files skipped from review as they are similar to previous changes (7)
  • web/src/features/managed-agents/resources/entities.tsx
  • web/src/features/managed-agents/types.ts
  • web/src/features/managed-agents/api.ts
  • web/src/features/managed-agents/resources/model.test.ts
  • web/src/features/managed-agents/resources/detail.tsx
  • web/src/features/managed-agents/resources/dialogs.tsx
  • web/src/features/managed-agents/resources/model.tsx

📝 Walkthrough

Walkthrough

The PR adds MCP OAuth credential types, payload handling, validation, organization API support, directory server selection, popup completion handling, and first-credential navigation.

Changes

MCP OAuth credential model

Layer / File(s) Summary
Credential model and validation
web/src/features/managed-agents/types.ts, web/src/features/managed-agents/resources/model.tsx, web/src/features/managed-agents/resources/model.test.ts
Credential forms support MCP OAuth fields, refresh configuration, payload generation, validation, labels, and test coverage.

Vault credential entry flow

Layer / File(s) Summary
Vault creation and first-credential entry
web/src/features/managed-agents/resources/entities.tsx, web/src/features/managed-agents/resources/detail.tsx
Credential-vault creation navigates to the detail page with addCredential=1. The detail panel opens the first-credential dialog and refreshes after OAuth completion.

OAuth dialog and API flow

Layer / File(s) Summary
OAuth API and credential dialog
web/src/features/managed-agents/api.ts, web/src/features/managed-agents/resources/dialogs.tsx, web/src/features/managed-agents/components/common.tsx
The organization API starts MCP Vault OAuth. The dialog loads directory servers, renders OAuth and password fields, opens the redirect popup, processes completion messages, and controls create, edit, skip, cancel, and save actions.

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

Sequence Diagram(s)

sequenceDiagram
  participant CredentialDialog
  participant OrganizationAPI
  participant OAuthPopup
  participant VaultCredentialsPanel
  CredentialDialog->>OrganizationAPI: Start MCP Vault OAuth
  OrganizationAPI-->>CredentialDialog: Return OAuth flow ID and redirect URL
  CredentialDialog->>OAuthPopup: Open redirect URL
  OAuthPopup-->>CredentialDialog: Send OAuth completion message
  CredentialDialog->>VaultCredentialsPanel: Close dialog and refresh
Loading

Possibly related issues

  • superduck-ai/open-managed-agents#121 — The PR adds the frontend MCP OAuth support described by this issue.

Suggested labels: ready-for-agent

Suggested reviewers: arthur-zhang, postroggy

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% 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
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: adding UI interactions for MCP OAuth credentials in vaults.
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.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/vault-mcp-oauth-credential-ui

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

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

@qifanlili
qifanlili force-pushed the feat/vault-mcp-oauth-credential-ui branch from 66dd218 to 41badc3 Compare August 7, 2026 01:27
@qifanlili qifanlili changed the title feat(vaults): MCP OAuth credential enrollment UI feat(vaults): 控制台支持 MCP OAuth 凭证登记 Aug 7, 2026
@qifanlili qifanlili changed the title feat(vaults): 控制台支持 MCP OAuth 凭证登记 feat(vaults): 添加对 MCP OAuth Credential 的UI交互 Aug 7, 2026
@qifanlili
qifanlili marked this pull request as ready for review August 7, 2026 01:40

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/src/features/managed-agents/resources/dialogs.tsx`:
- Around line 310-410: Update ManagedTextField to accept and forward an input
type prop, then apply type="password" to the token, secret, and client-secret
fields in the managed-agent credential dialog, including bearer, OAuth, refresh,
and environment-variable secret values. Add an intentional reveal control only
if the existing editing UX requires users to view these values.
- Around line 178-208: Update the OAuth submission flow around connectOAuth() to
retain the returned started.oauth_flow_id before opening the popup, then have
the useEffect completion handler accept messages only when both message.flow_id
matches that stored ID and message.vault_id matches vaultId. Preserve the
existing same-origin/type checks and error/completion handling, and include the
new flow ID and vaultId dependencies as needed.
- Around line 225-248: Update connectOAuth to open a blank OAuth popup
synchronously after validation and before awaiting startMCPVaultAuth, then
navigate that popup to started.redirect_url when the request succeeds. Track the
popup and close it in the request-failure path, while preserving the existing
popup-blocked error handling.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d36eee2c-5240-4df0-86c8-f981aff9ca5f

📥 Commits

Reviewing files that changed from the base of the PR and between b13bd8b and 41badc3.

📒 Files selected for processing (7)
  • web/src/features/managed-agents/api.ts
  • web/src/features/managed-agents/resources/detail.tsx
  • web/src/features/managed-agents/resources/dialogs.tsx
  • web/src/features/managed-agents/resources/entities.tsx
  • web/src/features/managed-agents/resources/model.test.ts
  • web/src/features/managed-agents/resources/model.tsx
  • web/src/features/managed-agents/types.ts

Comment thread web/src/features/managed-agents/resources/dialogs.tsx Outdated
Comment thread web/src/features/managed-agents/resources/dialogs.tsx
Comment thread web/src/features/managed-agents/resources/dialogs.tsx
@jh0904

jh0904 commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 41badc3bd5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread web/src/features/managed-agents/api.ts Outdated
Comment thread web/src/features/managed-agents/resources/dialogs.tsx Outdated
Comment thread web/src/features/managed-agents/resources/dialogs.tsx
- 添加mcp_oauth认证类型支持,包括访问令牌和刷新令牌配置
- 实现OAuth连接流程,支持动态注册和自定义客户端凭据
- 新增可选凭证字段折叠面板,优化表单布局和用户体验
- 添加目录服务器选择器,支持从预配置服务器列表中选择MCP服务器
- 实现凭证创建和编辑表单的完整验证逻辑
- 添加认证确认复选框,确保用户了解共享责任
- 集成CSRF保护和OAuth完成回调处理
- 扩展输入组件以支持密码类型和自动填充控制
- 添加跳过按钮用于首次凭证创建向导
- 实现凭证表单准备状态检查逻辑
- 添加OAuth弹窗阻止检测和错误处理机制
@qifanlili
qifanlili force-pushed the feat/vault-mcp-oauth-credential-ui branch from 41badc3 to 803fa22 Compare August 7, 2026 03:34
@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@qifanlili

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

To use Codex here, create a Codex account and connect to github.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants