@yancyyu/openhermit 1.5.8

package/src/renderer/components/runtime/ProviderRuntimeSettingsDialog.tsx

@@ -0,0 +1,288 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { providersApi } from '@renderer/api/providers';
+import { Button } from '@renderer/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@renderer/components/ui/dialog';
+import { Input } from '@renderer/components/ui/input';
+import { Loader2, RefreshCw } from 'lucide-react';
+
+import type { CliProviderId, CliProviderStatus } from '@shared/types';
+import type { AgentType, GlobalProvider } from '@shared/types/providers';
+
+interface Props {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly providers: CliProviderStatus[];
+  readonly initialProviderId: CliProviderId;
+  readonly projectPath?: string | null;
+  readonly providerStatusLoading?: Partial<Record<CliProviderId, boolean>>;
+  readonly disabled?: boolean;
+  readonly onSelectBackend: (providerId: CliProviderId, backendId: string) => Promise<void> | void;
+  readonly onRefreshProvider?: (providerId: CliProviderId) => Promise<void> | void;
+  readonly onRequestLogin?: (providerId: CliProviderId) => void;
+}
+
+const AGENT_TYPE_BY_CLI_PROVIDER: Record<CliProviderId, AgentType> = {
+  anthropic: 'claudecode',
+  codex: 'codex',
+  gemini: 'gemini',
+  opencode: 'opencode',
+};
+
+const CLI_PROVIDER_LABELS: Record<CliProviderId, string> = {
+  anthropic: 'Claude Code',
+  codex: 'Codex',
+  gemini: 'Gemini',
+  opencode: 'OpenCode',
+};
+
+function resolveProviderEndpoint(provider: GlobalProvider, agentType: AgentType): string {
+  return provider.endpoints?.[agentType] ?? provider.base_url ?? '默认端点';
+}
+
+function resolveProviderModel(provider: GlobalProvider, agentType: AgentType): string {
+  return (
+    provider.agent_models?.[agentType] ??
+    provider.model ??
+    provider.models?.[0]?.model ??
+    '未指定模型'
+  );
+}
+
+export const ProviderRuntimeSettingsDialog = ({
+  open,
+  onOpenChange,
+  initialProviderId,
+  onRefreshProvider,
+}: Props): React.JSX.Element => {
+  const agentType = AGENT_TYPE_BY_CLI_PROVIDER[initialProviderId];
+  const harnessLabel = CLI_PROVIDER_LABELS[initialProviderId] ?? initialProviderId;
+  const [providers, setProviders] = useState<GlobalProvider[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [newProviderName, setNewProviderName] = useState('');
+  const [newProviderModel, setNewProviderModel] = useState('');
+  const [newProviderBaseUrl, setNewProviderBaseUrl] = useState('');
+  const [newProviderApiKey, setNewProviderApiKey] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [addError, setAddError] = useState<string | null>(null);
+
+  const harnessProviders = useMemo(
+    () => providers.filter((provider) => provider.agent_types?.includes(agentType)),
+    [agentType, providers]
+  );
+
+  const refreshProviders = useCallback(async (): Promise<void> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await providersApi.list();
+      setProviders(result.providers ?? []);
+      await onRefreshProvider?.(initialProviderId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '加载 Provider 失败');
+      setProviders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [initialProviderId, onRefreshProvider]);
+
+  useEffect(() => {
+    if (open) {
+      void refreshProviders();
+    }
+  }, [open, refreshProviders]);
+
+  useEffect(() => {
+    if (!open) {
+      setNewProviderName('');
+      setNewProviderModel('');
+      setNewProviderBaseUrl('');
+      setNewProviderApiKey('');
+      setAddError(null);
+    }
+  }, [open]);
+
+  const handleAddProvider = async (): Promise<void> => {
+    if (!newProviderName.trim()) {
+      setAddError('请填写 Provider 名称');
+      return;
+    }
+    setAdding(true);
+    setAddError(null);
+    try {
+      await providersApi.add({
+        name: newProviderName.trim(),
+        model: newProviderModel.trim() || undefined,
+        base_url: newProviderBaseUrl.trim() || undefined,
+        api_key: newProviderApiKey.trim() || undefined,
+        agent_types: [agentType],
+      });
+      setNewProviderName('');
+      setNewProviderModel('');
+      setNewProviderBaseUrl('');
+      setNewProviderApiKey('');
+      await refreshProviders();
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : '添加 Provider 失败');
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[min(92vw,760px)] max-w-[min(92vw,760px)]">
+        <DialogHeader>
+          <DialogTitle>{harnessLabel} 配置</DialogTitle>
+          <DialogDescription>
+            统一管理当前 Harness 可用的 Provider。账号、模型、端点都通过 Provider 配置维护。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div
+            className="space-y-3 rounded-lg border p-3"
+            style={{ borderColor: 'var(--color-border-subtle)' }}
+          >
+            <div>
+              <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+                新增 Provider
+              </div>
+              <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                保存后会自动绑定到 {harnessLabel}。
+              </div>
+            </div>
+            <div className="grid gap-2 sm:grid-cols-2">
+              <Input
+                value={newProviderName}
+                onChange={(event) => setNewProviderName(event.target.value)}
+                placeholder="Provider 名称，例如 deepseek"
+              />
+              <Input
+                value={newProviderModel}
+                onChange={(event) => setNewProviderModel(event.target.value)}
+                placeholder="默认模型（可选）"
+              />
+              <Input
+                value={newProviderBaseUrl}
+                onChange={(event) => setNewProviderBaseUrl(event.target.value)}
+                placeholder="Base URL（可选）"
+              />
+              <Input
+                type="password"
+                value={newProviderApiKey}
+                onChange={(event) => setNewProviderApiKey(event.target.value)}
+                placeholder="API Key（可选）"
+              />
+            </div>
+            {addError ? <div className="text-xs text-red-400">{addError}</div> : null}
+            <div className="flex justify-end">
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={adding}
+                onClick={() => void handleAddProvider()}
+              >
+                {adding ? <Loader2 className="mr-1 size-3.5 animate-spin" /> : null}
+                添加 Provider
+              </Button>
+            </div>
+          </div>
+
+          <div
+            className="space-y-3 rounded-lg border p-3"
+            style={{ borderColor: 'var(--color-border-subtle)' }}
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+                  已绑定 Provider
+                </div>
+                <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                  Agent 类型：{agentType}
+                </div>
+              </div>
+              <Button
+                size="sm"
+                variant="ghost"
+                disabled={loading}
+                onClick={() => void refreshProviders()}
+              >
+                <RefreshCw className={loading ? 'mr-1 size-3.5 animate-spin' : 'mr-1 size-3.5'} />
+                刷新
+              </Button>
+            </div>
+
+            {error ? (
+              <div className="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-400">
+                {error}
+              </div>
+            ) : null}
+
+            {loading && harnessProviders.length === 0 ? (
+              <div className="flex items-center gap-2 text-xs text-[var(--color-text-muted)]">
+                <Loader2 className="size-3 animate-spin" />
+                正在加载 Provider...
+              </div>
+            ) : harnessProviders.length > 0 ? (
+              <div className="space-y-2">
+                {harnessProviders.map((provider) => (
+                  <div
+                    key={provider.name}
+                    className="rounded-lg border px-3 py-2"
+                    style={{
+                      borderColor: 'var(--color-border-subtle)',
+                      backgroundColor: 'rgba(255, 255, 255, 0.025)',
+                    }}
+                  >
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+                        {provider.name}
+                      </div>
+                      <span
+                        className="rounded-full px-2 py-0.5 text-[11px]"
+                        style={{
+                          color: provider.api_key ? '#86efac' : '#fbbf24',
+                          backgroundColor: provider.api_key
+                            ? 'rgba(74, 222, 128, 0.14)'
+                            : 'rgba(245, 158, 11, 0.12)',
+                        }}
+                      >
+                        {provider.api_key ? 'API Key 已配置' : '未配置 Key'}
+                      </span>
+                    </div>
+                    <div
+                      className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px]"
+                      style={{ color: 'var(--color-text-muted)' }}
+                    >
+                      <span>端点：{resolveProviderEndpoint(provider, agentType)}</span>
+                      <span>模型：{resolveProviderModel(provider, agentType)}</span>
+                      {provider.thinking ? <span>Thinking：{provider.thinking}</span> : null}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div
+                className="rounded-md border px-3 py-2 text-xs"
+                style={{
+                  borderColor: 'var(--color-border-subtle)',
+                  color: 'var(--color-text-muted)',
+                }}
+              >
+                当前还没有绑定到 {harnessLabel} 的 Provider。请在上方添加一个 Provider。
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/renderer/components/runtime/providerConnectionUi.ts

@@ -0,0 +1,408 @@
+import type { CliProviderAuthMode, CliProviderStatus } from '@shared/types';
+
+const CODEX_NATIVE_LABEL = 'Codex native';
+const ANTHROPIC_SUBSCRIPTION_LABEL = 'Anthropic 订阅';
+
+const AUTH_MODE_LABELS: Record<CliProviderAuthMode, string> = {
+  auto: '自动',
+  oauth: '订阅 / OAuth',
+  chatgpt: 'ChatGPT 账号',
+  api_key: 'API 密钥',
+};
+
+export function formatProviderAuthModeLabel(authMode: CliProviderAuthMode | null): string | null {
+  return authMode ? AUTH_MODE_LABELS[authMode] : null;
+}
+
+export function formatProviderAuthModeLabelForProvider(
+  providerId: CliProviderStatus['providerId'],
+  authMode: CliProviderAuthMode | null
+): string | null {
+  if (!authMode) {
+    return null;
+  }
+
+  if (providerId === 'anthropic' && authMode === 'oauth') {
+    return ANTHROPIC_SUBSCRIPTION_LABEL;
+  }
+
+  return formatProviderAuthModeLabel(authMode);
+}
+
+export function formatProviderAuthMethodLabel(authMethod: string | null): string {
+  switch (authMethod) {
+    case 'api_key':
+      return 'API 密钥';
+    case 'api_key_helper':
+      return 'API 密钥助手';
+    case 'oauth_token':
+      return 'OAuth';
+    case 'claude.ai':
+      return 'Claude 订阅';
+    case 'cli_oauth_personal':
+      return 'Gemini CLI';
+    case 'gemini_adc_authorized_user':
+      return 'Google 账号';
+    case 'gemini_adc_service_account':
+      return '服务账号';
+    default:
+      return authMethod ? authMethod.replaceAll('_', ' ') : '未连接';
+  }
+}
+
+export function formatProviderAuthMethodLabelForProvider(
+  providerId: CliProviderStatus['providerId'],
+  authMethod: string | null
+): string {
+  if (providerId === 'anthropic' && (authMethod === 'oauth_token' || authMethod === 'claude.ai')) {
+    return ANTHROPIC_SUBSCRIPTION_LABEL;
+  }
+
+  return formatProviderAuthMethodLabel(authMethod);
+}
+
+function isCodexNativeLane(provider: CliProviderStatus): boolean {
+  return (
+    provider.providerId === 'codex' &&
+    (provider.resolvedBackendId === 'codex-native' || provider.selectedBackendId === 'codex-native')
+  );
+}
+
+function getSelectedRuntimeBackendOption(
+  provider: CliProviderStatus
+): NonNullable<CliProviderStatus['availableBackends']>[number] | null {
+  const options = provider.availableBackends ?? [];
+  if (options.length === 0) {
+    return null;
+  }
+
+  const selectedBackendId = provider.selectedBackendId ?? null;
+  const resolvedBackendId = provider.resolvedBackendId ?? null;
+
+  return (
+    options.find((option) => option.id === selectedBackendId) ??
+    options.find((option) => option.id === resolvedBackendId) ??
+    null
+  );
+}
+
+export function isProviderInventoryOnlyFallback(provider: CliProviderStatus): boolean {
+  return (
+    provider.supported === false &&
+    provider.authenticated === false &&
+    provider.authMethod === null &&
+    provider.verificationState === 'unknown' &&
+    provider.models.length > 0 &&
+    provider.backend == null &&
+    (provider.availableBackends?.length ?? 0) === 0 &&
+    provider.capabilities.teamLaunch === false
+  );
+}
+
+export function isConnectionManagedRuntimeProvider(provider: CliProviderStatus): boolean {
+  return provider.providerId === 'codex';
+}
+
+function getCodexCurrentRuntimeLabel(provider: CliProviderStatus): string {
+  return CODEX_NATIVE_LABEL;
+}
+
+function getCodexApiKeyAvailabilitySummary(provider: CliProviderStatus): string | null {
+  if (provider.providerId !== 'codex' || !provider.connection?.apiKeyConfigured) {
+    return null;
+  }
+
+  if (provider.connection.apiKeySource === 'stored') {
+    return '管理页中已有保存的 API 密钥';
+  }
+
+  return provider.connection.apiKeySourceLabel ?? '已配置 API 密钥';
+}
+
+function getCodexMissingManagedAccountStatus(provider: CliProviderStatus): string | null {
+  if (provider.providerId !== 'codex') {
+    return null;
+  }
+
+  const codexConnection = provider.connection?.codex;
+  if (!codexConnection || codexConnection.managedAccount?.type === 'chatgpt') {
+    return null;
+  }
+
+  if (provider.connection?.configuredAuthMode !== 'chatgpt') {
+    return null;
+  }
+
+  if (codexConnection.requiresOpenaiAuth) {
+    if (codexConnection.localActiveChatgptAccountPresent) {
+      return 'Codex 本地已有选中的 ChatGPT 账号，但当前会话需要重新连接。';
+    }
+
+    return codexConnection.localAccountArtifactsPresent
+      ? 'Codex CLI 报告没有活跃的 ChatGPT 登录。本地存在 Codex 账号数据，但未选中活跃托管会话。'
+      : 'Codex CLI 报告没有活跃的 ChatGPT 登录';
+  }
+
+  return codexConnection.launchIssueMessage ?? '连接 ChatGPT 账号以使用你的 Codex 订阅。';
+}
+
+export function getProviderCurrentRuntimeSummary(provider: CliProviderStatus): string | null {
+  if (provider.providerId !== 'codex' || !isConnectionManagedRuntimeProvider(provider)) {
+    return null;
+  }
+
+  const prefix = provider.authenticated ? '当前运行时' : '所选运行时';
+  return `${prefix}: ${getCodexCurrentRuntimeLabel(provider)}`;
+}
+
+export function formatProviderStatusText(provider: CliProviderStatus): string {
+  if (isProviderInventoryOnlyFallback(provider)) {
+    return '检查中...';
+  }
+
+  const selectedBackendOption = getSelectedRuntimeBackendOption(provider);
+
+  if (provider.providerId === 'codex') {
+    if (provider.connection?.codex?.login.status === 'starting') {
+      return '正在启动 ChatGPT 登录...';
+    }
+
+    if (provider.connection?.codex?.login.status === 'pending') {
+      return '等待 ChatGPT 账号登录...';
+    }
+
+    if (
+      provider.connection?.codex?.login.status === 'failed' &&
+      provider.connection.codex.login.error
+    ) {
+      return provider.connection.codex.login.error;
+    }
+
+    if (
+      provider.connection?.codex?.appServerState === 'degraded' &&
+      provider.connection.codex.effectiveAuthMode === 'chatgpt' &&
+      provider.connection.codex.launchAllowed
+    ) {
+      return (
+        provider.connection.codex.launchIssueMessage ??
+        '已检测到 ChatGPT 账号，但账号验证当前处于降级状态。'
+      );
+    }
+
+    if (provider.connection?.codex?.launchAllowed) {
+      if (provider.connection.codex.effectiveAuthMode === 'chatgpt') {
+        return 'ChatGPT 账号已就绪';
+      }
+
+      if (provider.connection.codex.effectiveAuthMode === 'api_key') {
+        return 'API 密钥已就绪';
+      }
+    }
+
+    const missingManagedAccountStatus = getCodexMissingManagedAccountStatus(provider);
+    if (missingManagedAccountStatus) {
+      return missingManagedAccountStatus;
+    }
+
+    if (provider.connection?.codex?.launchIssueMessage) {
+      return provider.connection.codex.launchIssueMessage;
+    }
+
+    if (selectedBackendOption?.statusMessage) {
+      return selectedBackendOption.statusMessage;
+    }
+    return provider.statusMessage ?? (provider.authenticated ? 'Codex 原生运行时已就绪' : '未连接');
+  }
+
+  if (
+    isCodexNativeLane(provider) &&
+    selectedBackendOption?.state &&
+    selectedBackendOption.state !== 'ready'
+  ) {
+    return (
+      selectedBackendOption.statusMessage ?? provider.statusMessage ?? 'Codex 原生运行时不可用'
+    );
+  }
+
+  if (
+    isCodexNativeLane(provider) &&
+    selectedBackendOption?.audience === 'internal' &&
+    selectedBackendOption.statusMessage
+  ) {
+    return selectedBackendOption.statusMessage;
+  }
+
+  if (!provider.supported) {
+    return provider.statusMessage ?? '当前运行时不可用';
+  }
+
+  if (provider.authenticated) {
+    return `已通过 ${formatProviderAuthMethodLabelForProvider(
+      provider.providerId,
+      provider.authMethod
+    )}`;
+  }
+
+  if (provider.verificationState === 'offline') {
+    return provider.statusMessage ?? '无法验证';
+  }
+
+  return provider.statusMessage ?? '未连接';
+}
+
+export function getProviderConnectionModeSummary(provider: CliProviderStatus): string | null {
+  if (provider.providerId !== 'anthropic' && provider.providerId !== 'codex') {
+    return null;
+  }
+
+  if (provider.providerId === 'anthropic') {
+    if (provider.authenticated) {
+      return null;
+    }
+
+    if (provider.connection?.configuredAuthMode === 'auto') {
+      return null;
+    }
+  }
+
+  if (provider.providerId === 'codex' && provider.connection?.configuredAuthMode === 'auto') {
+    return null;
+  }
+
+  const authModeLabel = formatProviderAuthModeLabelForProvider(
+    provider.providerId,
+    provider.connection?.configuredAuthMode ?? null
+  );
+  if (!authModeLabel) {
+    return null;
+  }
+
+  return provider.providerId === 'codex'
+    ? `Selected auth: ${authModeLabel}`
+    : `Preferred auth: ${authModeLabel}`;
+}
+
+export function getProviderCredentialSummary(provider: CliProviderStatus): string | null {
+  if (!provider.connection?.apiKeyConfigured) {
+    return null;
+  }
+
+  if (
+    provider.providerId === 'anthropic' &&
+    provider.connection.apiKeySource === 'stored' &&
+    provider.connection.configuredAuthMode === 'auto'
+  ) {
+    return '管理中已有保存的 API 密钥';
+  }
+
+  if (provider.authMethod !== 'api_key' && provider.providerId === 'anthropic') {
+    return provider.connection.apiKeySource === 'stored'
+      ? '管理中也已配置 API 密钥'
+      : (provider.connection.apiKeySourceLabel ?? 'API 密钥已配置');
+  }
+
+  if (provider.authMethod !== 'api_key' && provider.providerId === 'gemini') {
+    return provider.connection.apiKeySource === 'stored'
+      ? '管理中已配置 API 密钥'
+      : (provider.connection.apiKeySourceLabel ?? 'API 密钥已配置');
+  }
+
+  if (provider.providerId === 'codex') {
+    const apiKeyAvailabilitySummary = getCodexApiKeyAvailabilitySummary(provider);
+    if (!apiKeyAvailabilitySummary) {
+      return null;
+    }
+
+    if (
+      provider.connection.codex?.managedAccount?.type === 'chatgpt' ||
+      provider.connection.codex?.effectiveAuthMode === 'chatgpt'
+    ) {
+      return provider.connection.apiKeySource === 'stored'
+        ? '管理中的 API 密钥也可作为备用'
+        : `${apiKeyAvailabilitySummary} - 可作为备用`;
+    }
+
+    if (provider.connection.configuredAuthMode === 'chatgpt') {
+      return provider.connection.apiKeySource === 'stored'
+        ? '切换到 API 密钥模式后可使用管理中保存的 API 密钥'
+        : `${apiKeyAvailabilitySummary} - 切换到 API 密钥模式后可用`;
+    }
+
+    if (provider.connection.configuredAuthMode === 'auto') {
+      return `${apiKeyAvailabilitySummary} - 自动模式会在 ChatGPT 连接前使用它`;
+    }
+
+    return apiKeyAvailabilitySummary;
+  }
+
+  return provider.connection.apiKeySourceLabel ?? null;
+}
+
+export function getProviderDisconnectAction(provider: CliProviderStatus): {
+  label: string;
+  confirmLabel: string;
+  title: string;
+  message: string;
+} | null {
+  if (!provider.authenticated) {
+    return null;
+  }
+
+  if (provider.providerId === 'anthropic') {
+    if (provider.authMethod !== 'oauth_token' && provider.authMethod !== 'claude.ai') {
+      return null;
+    }
+
+    return {
+      label: '断开连接',
+      confirmLabel: '断开连接',
+      title: '断开 Anthropic 订阅？',
+      message: provider.connection?.apiKeyConfigured
+        ? '这会从 Claude CLI 运行时移除本地 Anthropic 订阅会话。管理中保存的 API 密钥仍会保留。'
+        : '这会从 Claude CLI 运行时移除本地 Anthropic 订阅会话。',
+    };
+  }
+
+  if (provider.providerId === 'gemini' && provider.authMethod === 'cli_oauth_personal') {
+    return {
+      label: '断开连接',
+      confirmLabel: '断开连接',
+      title: '断开 Gemini CLI？',
+      message: '这会清除本地 Gemini CLI 会话元数据。外部 ADC 凭据和已保存 API 密钥不会被移除。',
+    };
+  }
+
+  return null;
+}
+
+export function getProviderConnectLabel(provider: CliProviderStatus): string {
+  if (provider.providerId === 'anthropic') {
+    return '连接 Anthropic';
+  }
+
+  if (provider.providerId === 'codex') {
+    return '连接 ChatGPT';
+  }
+
+  if (provider.providerId === 'gemini') {
+    return '打开登录';
+  }
+
+  return '连接';
+}
+
+export function shouldShowProviderConnectAction(provider: CliProviderStatus): boolean {
+  if (provider.providerId === 'codex') {
+    return false;
+  }
+
+  if (!provider.canLoginFromUi || provider.authenticated) {
+    return false;
+  }
+
+  if (provider.connection?.configuredAuthMode === 'api_key') {
+    return false;
+  }
+
+  return true;
+}