feat: manage MCP API keys from web console

Author: fengjiayi

docs/mcp-readonly-server.md

@@ -50,13 +50,19 @@ API key 应由 MCP 客户端的安全凭据、外部密钥注入或凭据存储
 插件配置、日志或流程内容中写入 key。
 
 SereinFlow AI Toolkit 将 `SEREINFLOW_MCP_API_KEY` 作为 HTTP Bearer token 的
-环境变量名；插件只声明变量名，不存储或传输密钥值。开发环境首次启用时，服务运维者
-应为 `SereinFlow:Mcp:BootstrapAdminKey` 配置一个随机临时密钥，并在运行 Codex 的
-同一用户环境中把相同值设置为 `SEREINFLOW_MCP_API_KEY`。连接后，使用管理员 MCP
-工具创建一个专用 API key，把客户端环境变量替换为该专用 key，随后移除 Bootstrap
-配置。生产环境不应长期保留 Bootstrap key。
-
-例如，PowerShell 中可在启动 API 与 Codex 前分别设置服务器和客户端环境变量；尖括号
+环境变量名；插件只声明变量名，不存储或传输密钥值。推荐在 Web Console 的“环境设置”
+中完成密钥管理：第一次打开时点击“生成首个密钥”，随后为 Codex 创建项目范围的
+客户端 key。完整 `sfk_...` Secret 只在生成或轮换后显示一次，服务端数据库只保存
+哈希和盐。初始化接口仅接受本机 loopback 请求；如果服务器和浏览器不在同一台机器，
+请先由服务器管理员通过受控配置完成首次初始化，再在 Web Console 中继续管理密钥。
+
+生成的 Secret 需要填入 Codex 的 MCP 凭据配置中，变量名填写
+`SEREINFLOW_MCP_API_KEY`，变量值粘贴 Web Console 显示的完整 Secret。浏览器出于
+安全边界不能直接修改已经运行的 Codex 进程环境变量，因此服务端可以负责生成和持久化
+密钥，但客户端仍需要这一步凭据绑定。不要把 Secret 写入仓库、插件源文件、日志或流程
+内容。
+
+只有在无法访问 Web Console 时，才使用 PowerShell 配置首次 bootstrap key；尖括号
 内容是同一段随机密钥，不能提交或记录：
 
 ```powershell

frontend/sereinflow-web/src/api/mcpApi.ts

@@ -0,0 +1,169 @@
+import type { ProjectWorkspaceDto } from './flowApi'
+
+export type McpPermission =
+  | 'project.read'
+  | 'project.write'
+  | 'library.read'
+  | 'run.read'
+  | 'debug.read'
+  | 'flow.write'
+  | 'debug.control'
+  | 'flow.publish'
+  | 'flow.rollback'
+  | 'script.compile'
+  | 'library.import'
+  | 'library.manage'
+  | 'mcp.keys.manage'
+  | 'sensitive.read'
+
+export interface McpApiKeyDto {
+  id: string
+  projectId?: string | null
+  name: string
+  keyPrefix: string
+  permissions: McpPermission[]
+  createdAt: string
+  expiresAt?: string | null
+  revokedAt?: string | null
+  lastUsedAt?: string | null
+  isAdministrator: boolean
+}
+
+export interface CreatedMcpApiKeyDto {
+  key: McpApiKeyDto
+  secret: string
+}
+
+export interface RotatedMcpApiKeyDto {
+  revokedKeyId: string
+  key: McpApiKeyDto
+  secret?: string | null
+}
+
+export interface CreateMcpApiKeyRequestDto {
+  projectId?: string | null
+  name: string
+  permissions: McpPermission[]
+  expiresAt?: string | null
+  isAdministrator?: boolean
+}
+
+export interface McpKeyProjectOption {
+  id: string
+  name: string
+}
+
+const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
+const sessionCredentialKey = 'sereinflow.mcp.management-key'
+const rememberedCredentialKey = 'sereinflow.mcp.management-key.remembered'
+
+export function getMcpManagementCredential(): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  try {
+    return window.sessionStorage.getItem(sessionCredentialKey)
+      ?? window.localStorage.getItem(rememberedCredentialKey)
+      ?? undefined
+  } catch {
+    return undefined
+  }
+}
+
+export function hasRememberedMcpManagementCredential(): boolean {
+  if (typeof window === 'undefined') return false
+  try {
+    return Boolean(window.localStorage.getItem(rememberedCredentialKey))
+  } catch {
+    return false
+  }
+}
+
+export function storeMcpManagementCredential(secret: string, remember: boolean): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.sessionStorage.setItem(sessionCredentialKey, secret)
+    if (remember) window.localStorage.setItem(rememberedCredentialKey, secret)
+    else window.localStorage.removeItem(rememberedCredentialKey)
+  } catch {
+    // Storage may be disabled by the browser; the current request still succeeds.
+  }
+}
+
+export function clearMcpManagementCredential(): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.sessionStorage.removeItem(sessionCredentialKey)
+    window.localStorage.removeItem(rememberedCredentialKey)
+  } catch {
+    // Ignore storage cleanup failures.
+  }
+}
+
+export async function setupMcpApiKey(): Promise<CreatedMcpApiKeyDto> {
+  return request<CreatedMcpApiKeyDto>('/api/environment/settings/mcp-keys/setup', { method: 'POST' })
+}
+
+export async function listMcpApiKeys(secret: string): Promise<McpApiKeyDto[]> {
+  return request<McpApiKeyDto[]>('/api/environment/settings/mcp-keys', { secret })
+}
+
+export async function createMcpApiKey(
+  secret: string,
+  body: CreateMcpApiKeyRequestDto,
+): Promise<CreatedMcpApiKeyDto> {
+  return request<CreatedMcpApiKeyDto>('/api/environment/settings/mcp-keys', {
+    method: 'POST',
+    secret,
+    body,
+  })
+}
+
+export async function rotateMcpApiKey(secret: string, keyId: string): Promise<RotatedMcpApiKeyDto> {
+  return request<RotatedMcpApiKeyDto>(`/api/environment/settings/mcp-keys/${encodeURIComponent(keyId)}/rotate`, {
+    method: 'POST',
+    secret,
+  })
+}
+
+export async function revokeMcpApiKey(secret: string, keyId: string): Promise<McpApiKeyDto> {
+  return request<McpApiKeyDto>(`/api/environment/settings/mcp-keys/${encodeURIComponent(keyId)}`, {
+    method: 'DELETE',
+    secret,
+  })
+}
+
+export function mcpKeyProjectOptions(workspaces: ProjectWorkspaceDto[]): McpKeyProjectOption[] {
+  return workspaces
+    .filter((workspace) => workspace.project.status !== 'archived')
+    .map((workspace) => ({ id: workspace.project.id, name: workspace.project.name }))
+}
+
+async function request<T>(
+  path: string,
+  options: { method?: 'POST' | 'DELETE'; secret?: string; body?: unknown } = {},
+): Promise<T> {
+  const headers: Record<string, string> = {}
+  if (options.body !== undefined) headers['content-type'] = 'application/json'
+  if (options.secret) headers.authorization = `Bearer ${options.secret}`
+  const response = await fetch(`${apiBaseUrl}${path}`, {
+    method: options.method,
+    headers: Object.keys(headers).length > 0 ? headers : undefined,
+    body: options.body === undefined ? undefined : JSON.stringify(options.body),
+  })
+  if (response.ok) {
+    const payload = await response.text()
+    return (payload ? JSON.parse(payload) : undefined) as T
+  }
+
+  const problem = await response.json().catch(() => ({})) as { detail?: string; title?: string }
+  throw new McpApiError(response.status, problem.detail ?? problem.title ?? `MCP request failed (${response.status}).`)
+}
+
+export class McpApiError extends Error {
+  public readonly status: number
+
+  constructor(status: number, message: string) {
+    super(message)
+    this.status = status
+    this.name = 'McpApiError'
+  }
+}