From 520e005465dd8bbb95e8fbe859e1df784590373c Mon Sep 17 00:00:00 2001 From: "yanan.zhangyn" Date: Wed, 9 Sep 2026 19:48:20 +0800 Subject: [PATCH 01/46] fix(studio): simplify MCP credential editing --- frontend/src/App.tsx | 34 ++- frontend/src/adk/client.ts | 52 +++++ frontend/src/create/CustomCreate.css | 61 +++--- frontend/src/create/CustomCreate.tsx | 207 +++++++----------- frontend/src/create/mcpAuth.ts | 187 +++++----------- frontend/src/create/types.ts | 11 +- frontend/src/i18n/resources/en-US/adk.json | 2 + frontend/src/i18n/resources/en-US/create.json | 12 +- frontend/src/i18n/resources/zh-CN/adk.json | 2 + frontend/src/i18n/resources/zh-CN/create.json | 12 +- frontend/tests/agentWorkspace.test.mjs | 20 +- frontend/tests/deploymentConfigUi.test.mjs | 5 +- frontend/tests/mcpAuth.test.mjs | 161 +++++++------- frontend/tests/runtimeAgentIdentity.test.mjs | 2 +- tests/cli/test_studio_rbac.py | 50 +++++ veadk/cli/cli_frontend.py | 85 +++++++ veadk/cli/legacy_runtime_recovery.py | 51 +++++ 17 files changed, 538 insertions(+), 416 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c638ba4bb..310d41e08 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -35,6 +35,7 @@ import { getSession, getStudioAccess, getRuntimeStudioToolCapabilities, + getRuntimeMcpCredentials, getRuntimes, listApps, listEnvironments, @@ -156,7 +157,10 @@ import { WorkspaceCreate, WorkspaceCreateIcon } from "./create/WorkspaceCreate"; import { CodePackageCreate } from "./create/CodePackageCreate"; import { MigrationWorkspace } from "./migrations/MigrationWorkspace"; import type { AgentDraft } from "./create/types"; -import { configuredMcpEnvKeys } from "./create/mcpAuth"; +import { + configuredMcpEnvKeys, + hydrateMcpCredentialValues, +} from "./create/mcpAuth"; import { hydrateRuntimeModelSelection, isRuntimeModelSelectionEnv, @@ -7346,11 +7350,33 @@ export default function App() { hydratedDraft, arkModelIds, ); + let editorDraft = classifiedDraft; + if (configuredMcpEnvKeys(classifiedDraft).length > 0) { + try { + const credentials = await getRuntimeMcpCredentials({ + runtimeId: capability.runtime.runtimeId, + region: capability.runtime.region, + appName: capability.agent.appName, + etag: capability.etag, + }); + editorDraft = hydrateMcpCredentialValues( + classifiedDraft, + credentials, + ); + } catch (credentialError) { + setError( + credentialError instanceof Error + ? credentialError.message + : appText("errors.runtimeDeploymentConfigUnavailable"), + ); + return; + } + } exitAgentDetailContext(); - setImportedDraft(classifiedDraft); + setImportedDraft(editorDraft); setCustomCreateMode("custom"); setCustomCreationSurface( - classifiedDraft.dynamicAgentDelegation === true + editorDraft.dynamicAgentDelegation === true ? "vulcan" : "traditional", ); @@ -7373,7 +7399,7 @@ export default function App() { capability.editMode === "source-preserving" ? "source-preserving" : "regenerate", - configuredMcpEnvKeys: configuredMcpEnvKeys(classifiedDraft), + configuredMcpEnvKeys: configuredMcpEnvKeys(editorDraft), configuredRuntimeEnvKeys: capability.runtime.configuredEnvKeys, }); diff --git a/frontend/src/adk/client.ts b/frontend/src/adk/client.ts index 8fbd6d21c..0d1c1dc50 100644 --- a/frontend/src/adk/client.ts +++ b/frontend/src/adk/client.ts @@ -30,6 +30,7 @@ import { import type { AgentProject } from "../create/project"; import type { AgentDraft, + McpCredentialValue, NetworkConfig, SelectedSkill, } from "../create/types"; @@ -4588,6 +4589,57 @@ export interface RuntimeUpdateCapability { } | null; } +/** Fetch the exact MCP credentials for one authorized update snapshot. */ +export async function getRuntimeMcpCredentials({ + runtimeId, + region, + appName, + etag, + signal, +}: { + runtimeId: string; + region: string; + appName: string; + etag: string; + signal?: AbortSignal; +}): Promise { + const res = await apiFetch("/web/runtime-mcp-credentials", { + method: "POST", + cache: "no-store", + signal, + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ runtimeId, region, appName, etag }), + }); + if (!res.ok) { + throw new Error( + await httpErrorMessage(res, adkT("client.loadMcpCredentialsFailed")), + ); + } + const payload = (await res.json().catch(() => null)) as { + credentials?: unknown; + } | null; + if (!Array.isArray(payload?.credentials)) { + throw new Error(adkT("client.invalidMcpCredentials")); + } + return payload.credentials.map((item) => { + if (!item || typeof item !== "object") { + throw new Error(adkT("client.invalidMcpCredentials")); + } + const raw = item as Record; + const credential = { + agentName: raw.agentName, + name: raw.name, + url: raw.url, + authTokenEnv: raw.authTokenEnv, + value: raw.value, + }; + if (Object.values(credential).some((value) => typeof value !== "string")) { + throw new Error(adkT("client.invalidMcpCredentials")); + } + return credential as McpCredentialValue; + }); +} + interface RuntimeUpdateCapabilityRequest { runtimeId: string; region: string; diff --git a/frontend/src/create/CustomCreate.css b/frontend/src/create/CustomCreate.css index a8da4f158..f70d4f472 100644 --- a/frontend/src/create/CustomCreate.css +++ b/frontend/src/create/CustomCreate.css @@ -3752,50 +3752,39 @@ line-height: 1.5; color: hsl(var(--muted-foreground)); } -.cw-mcp-auth-state { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-height: 32px; - padding: 7px 10px; - border: 1px solid hsl(var(--border)); - border-radius: 8px; - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); - font-size: 12px; - line-height: 1.45; +.cw-mcp-token-field { + position: relative; } -.cw-mcp-auth-state button { - flex: 0 0 auto; - min-height: 28px; - padding: 0 9px; - border: 1px solid hsl(var(--border)); +.cw-mcp-token-field .cw-input { + padding-right: 40px; +} +.cw-mcp-token-toggle { + position: absolute; + top: 50%; + right: 4px; + display: inline-grid; + width: 28px; + height: 28px; + padding: 0; + border: 0; border-radius: 6px; - background: hsl(var(--panel)); - color: hsl(var(--foreground)); + background: transparent; + color: hsl(var(--muted-foreground)); cursor: pointer; - font: inherit; + place-items: center; + transform: translateY(-50%); } -.cw-mcp-auth-state button:hover { - background: hsl(var(--accent)); +.cw-mcp-token-toggle:hover { + background: hsl(var(--muted)); + color: hsl(var(--foreground)); } -.cw-mcp-auth-state button:focus-visible { +.cw-mcp-token-toggle:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; } -.cw-mcp-auth-state.is-warning { - align-items: flex-start; - border-color: hsl(var(--destructive) / 0.35); - background: hsl(var(--destructive) / 0.06); - color: hsl(var(--foreground)); -} -.cw-mcp-auth-actions { - display: flex; - flex: 0 0 auto; - flex-wrap: wrap; - justify-content: flex-end; - gap: 6px; +.cw-mcp-token-toggle svg { + width: 16px; + height: 16px; } .cw-mcp-warning { display: flex; diff --git a/frontend/src/create/CustomCreate.tsx b/frontend/src/create/CustomCreate.tsx index db1a0f364..4d72a19a0 100644 --- a/frontend/src/create/CustomCreate.tsx +++ b/frontend/src/create/CustomCreate.tsx @@ -94,18 +94,12 @@ import { import { localPickerMatches } from "./localPickerSearch"; import { draftToYaml } from "./configYaml"; import { - confirmMcpCredentialReuse, - clearMcpConfiguredAuth, deploymentMcpSecretValues, type McpConfigurationConflict, mcpAuthTokenInputValue, - mcpCredentialActionRequired, mcpConfigurationConflict, - mcpCredentialReuseValues, mcpUrlNeedsPathWarning, prepareMcpAuth, - removeMcpCredentialForChangedUrl, - replaceMcpCredentialForChangedUrl, removedConfiguredMcpEnvKeys, sourcePreservingMcpSecretValues, updateMcpAuthTokenInput, @@ -2118,6 +2112,34 @@ function VikingMemorySelect({ * (http / stdio) and shows the matching fields. http -> url + optional * bearer token; stdio -> command + space-separated args. Optional name. * ---------------------------------------------------------------- */ +function McpTokenVisibilityIcon({ hidden }: { hidden: boolean }) { + return ( + + ); +} + function McpToolEditor({ tools, conflict, @@ -2131,11 +2153,20 @@ function McpToolEditor({ }) { const { t } = useTranslation("create"); const conflictErrorId = useId(); + const [revealedTokenIndex, setRevealedTokenIndex] = useState( + null, + ); const visibleConflict = showConflict ? conflict : null; const update = (i: number, p: Partial) => onChange(tools.map((tool, idx) => (idx === i ? { ...tool, ...p } : tool))); - const remove = (i: number) => onChange(tools.filter((_, idx) => idx !== i)); + const remove = (i: number) => { + setRevealedTokenIndex((current) => { + if (current == null || current < i) return current; + return current === i ? null : current - 1; + }); + onChange(tools.filter((_, idx) => idx !== i)); + }; const add = () => onChange([...tools, { name: "", transport: "http", url: "" }]); @@ -2233,119 +2264,49 @@ function McpToolEditor({

)} - - onChange( - tools.map((tool, index) => - index === i - ? updateMcpAuthTokenInput(tool, e.target.value) - : tool, - ), - ) - } - /> - {tool.credentialUpdate === "pending" && ( -
+ + onChange( + tools.map((tool, index) => + index === i + ? updateMcpAuthTokenInput(tool, e.target.value) + : tool, + ), + ) + } + /> + - - -
- - )} - {tool.credentialUpdate === "reuse" && ( -
- {t("traditional.mcp.reuseHint")} - -
- )} - {tool.credentialConfigured && - !tool.authToken && - !tool.credentialUpdate && ( -
- {t("traditional.mcp.credentialConfigured")} - -
- )} +