@yancyyu/openhermit 1.5.8

package/src/renderer/components/settings/sections/CliStatusSection.tsx

@@ -0,0 +1,930 @@
+/**
+ * CliStatusSection — CLI installation status and install/update controls.
+ *
+ * Displayed in Settings → Advanced, only in Electron mode.
+ * Shows detection status, version info, download progress, and error states.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { confirm } from '@renderer/components/common/ConfirmDialog';
+import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
+import {
+  getProviderConnectLabel,
+  getProviderDisconnectAction,
+  shouldShowProviderConnectAction,
+} from '@renderer/components/runtime/providerConnectionUi';
+import { ProviderRuntimeSettingsDialog } from '@renderer/components/runtime/ProviderRuntimeSettingsDialog';
+import { ALL_AGENT_TYPES, AGENT_TYPE_LABELS } from '@renderer/components/team/HarnessCards';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@renderer/components/ui/dialog';
+import { Input } from '@renderer/components/ui/input';
+import { useCliInstaller } from '@renderer/hooks/useCliInstaller';
+import { providersApi } from '@renderer/api/providers';
+import { useStore } from '@renderer/store';
+import { createLoadingMultimodelCliStatus } from '@renderer/store/slices/cliInstallerSlice';
+import { getMainScreenCliProviders } from '@renderer/utils/claudeCodeOnlyProviders';
+import { formatBytes } from '@renderer/utils/formatters';
+import { resolveProjectPathById } from '@renderer/utils/projectLookup';
+import { refreshCliStatusForCurrentMode } from '@renderer/utils/refreshCliStatus';
+import { getRuntimeDisplayName } from '@renderer/utils/runtimeDisplayName';
+import {
+  AlertTriangle,
+  CheckCircle,
+  Download,
+  Loader2,
+  LogIn,
+  LogOut,
+  Puzzle,
+  RefreshCw,
+  SlidersHorizontal,
+  Terminal,
+} from 'lucide-react';
+
+import { SettingsSectionHeader } from '../components';
+
+import type { CliProviderId, CliProviderStatus } from '@shared/types';
+import type { CcAgentType } from '@shared/types/ccConnect';
+import type { GlobalProvider } from '@shared/types/providers';
+
+const CLI_PROVIDER_BY_AGENT_TYPE: Partial<Record<CcAgentType, CliProviderId>> = {
+  claudecode: 'anthropic',
+  codex: 'codex',
+  gemini: 'gemini',
+  opencode: 'opencode',
+};
+
+const ProviderBetaBadge = (): React.JSX.Element => (
+  <span
+    className="inline-flex h-4 shrink-0 items-center rounded border px-1.5 text-[9px] font-semibold uppercase leading-none"
+    style={{
+      borderColor: 'rgba(251, 191, 36, 0.32)',
+      backgroundColor: 'rgba(251, 191, 36, 0.12)',
+      color: '#fbbf24',
+    }}
+  >
+    beta
+  </span>
+);
+
+function getProviderLabel(providerId: CliProviderId): string {
+  switch (providerId) {
+    case 'anthropic':
+      return 'Claude Code';
+    case 'codex':
+      return 'Codex';
+    case 'gemini':
+      return 'Gemini';
+    case 'opencode':
+      return 'OpenCode (75+ LLM providers)';
+  }
+}
+
+function getProviderTerminalCommand(provider: CliProviderStatus): {
+  args: string[];
+  env?: Record<string, string>;
+} {
+  if (provider.providerId === 'gemini') {
+    return {
+      args: ['login'],
+      env: {
+        CLAUDE_CODE_ENTRY_PROVIDER: 'gemini',
+        CLAUDE_CODE_GEMINI_BACKEND: provider.selectedBackendId ?? 'auto',
+      },
+    };
+  }
+
+  if (provider.providerId === 'codex') {
+    return {
+      args: ['auth', 'login', '--provider', provider.providerId],
+      env: {
+        CLAUDE_CODE_CODEX_BACKEND: provider.selectedBackendId ?? 'codex-native',
+      },
+    };
+  }
+
+  return {
+    args: ['auth', 'login', '--provider', provider.providerId],
+  };
+}
+
+function getProviderTerminalLogoutCommand(provider: CliProviderStatus): {
+  args: string[];
+  env?: Record<string, string>;
+} {
+  if (provider.providerId === 'gemini') {
+    return {
+      args: ['logout'],
+      env: {
+        CLAUDE_CODE_ENTRY_PROVIDER: 'gemini',
+        CLAUDE_CODE_GEMINI_BACKEND: provider.selectedBackendId ?? 'auto',
+      },
+    };
+  }
+
+  if (provider.providerId === 'codex') {
+    return {
+      args: ['auth', 'logout', '--provider', provider.providerId],
+      env: {
+        CLAUDE_CODE_CODEX_BACKEND: provider.selectedBackendId ?? 'codex-native',
+      },
+    };
+  }
+
+  return {
+    args: ['auth', 'logout', '--provider', provider.providerId],
+  };
+}
+
+interface CliStatusSectionProps {
+  showSectionHeader?: boolean;
+}
+
+export const CliStatusSection = ({
+  showSectionHeader = true,
+}: CliStatusSectionProps): React.JSX.Element | null => {
+  const appConfig = useStore((s) => s.appConfig);
+  const selectedProjectId = useStore((s) => s.selectedProjectId);
+  const projects = useStore((s) => s.projects);
+  const repositoryGroups = useStore((s) => s.repositoryGroups);
+  const openExtensionsTab = useStore((s) => s.openExtensionsTab);
+  const updateConfig = useStore((s) => s.updateConfig);
+  const {
+    cliStatus,
+    installerState,
+    downloadProgress,
+    downloadTransferred,
+    downloadTotal,
+    installerError,
+    completedVersion,
+    bootstrapCliStatus,
+    fetchCliStatus,
+    fetchCliProviderStatus,
+    installCli,
+    isBusy,
+    cliStatusLoading,
+    cliProviderStatusLoading,
+    invalidateCliStatus,
+  } = useCliInstaller();
+  const [providerTerminal, setProviderTerminal] = useState<{
+    providerId: CliProviderId;
+    action: 'login' | 'logout';
+  } | null>(null);
+  const [manageProviderId, setManageProviderId] = useState<CliProviderId>('gemini');
+  const [manageDialogOpen, setManageDialogOpen] = useState(false);
+  const [genericHarnessAgentType, setGenericHarnessAgentType] = useState<CcAgentType | null>(null);
+  const [globalProviders, setGlobalProviders] = useState<GlobalProvider[]>([]);
+  const [globalProvidersLoading, setGlobalProvidersLoading] = useState(false);
+  const [globalProvidersError, setGlobalProvidersError] = useState<string | null>(null);
+  const multimodelEnabled = appConfig?.general?.multimodelEnabled ?? false;
+  const selectedProjectPath = useMemo(
+    () => resolveProjectPathById(selectedProjectId, projects, repositoryGroups)?.path ?? null,
+    [projects, repositoryGroups, selectedProjectId]
+  );
+  const loadingCliStatus =
+    !cliStatus && cliStatusLoading && multimodelEnabled
+      ? createLoadingMultimodelCliStatus()
+      : cliStatus;
+  const effectiveCliStatus = loadingCliStatus;
+  const visibleProviders = useMemo(
+    () => getMainScreenCliProviders(effectiveCliStatus),
+    [effectiveCliStatus]
+  );
+  const canOpenExtensions = effectiveCliStatus?.installed === true;
+  const showInstalledControls =
+    effectiveCliStatus !== null && (installerState === 'idle' || installerState === 'completed');
+
+  useEffect(() => {
+    if (!cliStatus) {
+      if (multimodelEnabled) {
+        void bootstrapCliStatus({ multimodelEnabled: true });
+      } else {
+        void fetchCliStatus();
+      }
+    }
+  }, [bootstrapCliStatus, cliStatus, fetchCliStatus, multimodelEnabled]);
+
+  const refreshGlobalProviders = useCallback(async (): Promise<void> => {
+    setGlobalProvidersLoading(true);
+    setGlobalProvidersError(null);
+    try {
+      const result = await providersApi.list();
+      setGlobalProviders(result.providers ?? []);
+    } catch (error) {
+      setGlobalProvidersError(error instanceof Error ? error.message : '加载 Provider 失败');
+      setGlobalProviders([]);
+    } finally {
+      setGlobalProvidersLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshGlobalProviders();
+  }, [refreshGlobalProviders]);
+
+  const handleInstall = useCallback(() => {
+    installCli();
+  }, [installCli]);
+
+  const handleRefresh = useCallback(() => {
+    void refreshCliStatusForCurrentMode({
+      multimodelEnabled,
+      bootstrapCliStatus,
+      fetchCliStatus,
+    });
+  }, [bootstrapCliStatus, fetchCliStatus, multimodelEnabled]);
+
+  const handleProviderLogout = useCallback(
+    async (providerId: CliProviderId) => {
+      const provider =
+        effectiveCliStatus?.providers.find((entry) => entry.providerId === providerId) ?? null;
+      const disconnectAction = provider ? getProviderDisconnectAction(provider) : null;
+      if (!disconnectAction) {
+        return;
+      }
+
+      const confirmed = await confirm({
+        title: disconnectAction.title,
+        message: disconnectAction.message,
+        confirmLabel: disconnectAction.confirmLabel,
+        cancelLabel: '取消',
+        variant: 'danger',
+      });
+
+      if (!confirmed) {
+        return;
+      }
+
+      setProviderTerminal({
+        providerId,
+        action: 'logout',
+      });
+    },
+    [effectiveCliStatus?.providers]
+  );
+
+  const handleProviderManage = useCallback((providerId: CliProviderId) => {
+    setManageProviderId(providerId);
+    setManageDialogOpen(true);
+  }, []);
+
+  const handleHarnessManage = useCallback(
+    (agentType: CcAgentType) => {
+      const providerId = CLI_PROVIDER_BY_AGENT_TYPE[agentType];
+      if (providerId && visibleProviders.some((provider) => provider.providerId === providerId)) {
+        setManageProviderId(providerId);
+        setManageDialogOpen(true);
+        return;
+      }
+      setGenericHarnessAgentType(agentType);
+    },
+    [visibleProviders]
+  );
+
+  const recheckStatus = useCallback(() => {
+    void (async () => {
+      await invalidateCliStatus();
+      await refreshCliStatusForCurrentMode({
+        multimodelEnabled,
+        bootstrapCliStatus,
+        fetchCliStatus,
+      });
+    })();
+  }, [bootstrapCliStatus, fetchCliStatus, invalidateCliStatus, multimodelEnabled]);
+
+  const handleRuntimeBackendChange = useCallback(
+    async (providerId: CliProviderId, backendId: string) => {
+      const currentBackends = appConfig?.runtime?.providerBackends ?? {
+        gemini: 'auto' as const,
+        codex: 'codex-native' as const,
+      };
+
+      if (providerId !== 'gemini' && providerId !== 'codex') {
+        return;
+      }
+
+      await updateConfig('runtime', {
+        providerBackends: {
+          ...currentBackends,
+          [providerId]: backendId,
+        },
+      });
+
+      try {
+        await fetchCliProviderStatus(providerId);
+      } catch {
+        throw new Error('Runtime updated, but failed to refresh provider status.');
+      }
+    },
+    [appConfig?.runtime?.providerBackends, fetchCliProviderStatus, updateConfig]
+  );
+
+  const runtimeDisplayName = getRuntimeDisplayName(effectiveCliStatus, multimodelEnabled);
+  const runtimeLabel = '运行时';
+
+  const activeTerminalProvider = providerTerminal
+    ? (effectiveCliStatus?.providers.find(
+        (provider) => provider.providerId === providerTerminal.providerId
+      ) ?? null)
+    : null;
+  const providerTerminalCommand =
+    providerTerminal && activeTerminalProvider
+      ? providerTerminal.action === 'login'
+        ? getProviderTerminalCommand(activeTerminalProvider)
+        : getProviderTerminalLogoutCommand(activeTerminalProvider)
+      : null;
+  const cliProviderStatusByAgentType = useMemo(() => {
+    const map = new Map<CcAgentType, CliProviderStatus>();
+    for (const agentType of ALL_AGENT_TYPES) {
+      const providerId = CLI_PROVIDER_BY_AGENT_TYPE[agentType];
+      const provider = providerId
+        ? (visibleProviders.find((entry) => entry.providerId === providerId) ?? null)
+        : null;
+      if (provider) {
+        map.set(agentType, provider);
+      }
+    }
+    return map;
+  }, [visibleProviders]);
+  const globalProvidersByAgentType = useMemo(() => {
+    const map = new Map<CcAgentType, GlobalProvider[]>();
+    for (const agentType of ALL_AGENT_TYPES) {
+      map.set(
+        agentType,
+        globalProviders.filter((provider) =>
+          ((provider.agent_types ?? []) as readonly string[]).some(
+            (supportedType) => supportedType === agentType
+          )
+        )
+      );
+    }
+    return map;
+  }, [globalProviders]);
+
+  return (
+    <div className="mb-2">
+      {showSectionHeader ? <SettingsSectionHeader title="Harness 配置" /> : null}
+      <div className="space-y-3 py-2">
+        {/* Loading status */}
+        {!effectiveCliStatus && installerState === 'idle' && (
+          <div
+            className="flex items-center gap-2 text-sm"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
+            <Loader2 className="size-4 animate-spin" />
+            {multimodelEnabled ? '正在检查 Harness 提供商...' : '正在检查 Harness 运行时...'}
+          </div>
+        )}
+
+        {/* Status display */}
+        {showInstalledControls && effectiveCliStatus && (
+          <div className="space-y-2">
+            {effectiveCliStatus.installed ? (
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 text-sm">
+                  <Terminal
+                    className="size-4 shrink-0"
+                    style={{ color: 'var(--color-text-muted)' }}
+                  />
+                  {runtimeLabel && (
+                    <span style={{ color: 'var(--color-text)' }}>{runtimeLabel}</span>
+                  )}
+                  {/* Extensions button — right-aligned */}
+                  {canOpenExtensions && (
+                    <button
+                      type="button"
+                      onClick={openExtensionsTab}
+                      className="ml-auto flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-white/5"
+                      style={{
+                        borderColor: 'var(--color-border)',
+                        color: 'var(--color-text-secondary)',
+                      }}
+                    >
+                      <Puzzle className="size-3.5" />
+                      扩展
+                    </button>
+                  )}
+                </div>
+                {effectiveCliStatus.showBinaryPath && effectiveCliStatus.binaryPath && (
+                  <p
+                    className="ml-6 truncate text-xs"
+                    style={{ color: 'var(--color-text-muted)' }}
+                    title={effectiveCliStatus.binaryPath}
+                  >
+                    {effectiveCliStatus.binaryPath}
+                  </p>
+                )}
+                <div className="ml-6 mt-3 space-y-2">
+                    {ALL_AGENT_TYPES.map((agentType) => {
+                      const provider = cliProviderStatusByAgentType.get(agentType) ?? null;
+                      const harnessProviders = globalProvidersByAgentType.get(agentType) ?? [];
+                      if (!provider) {
+                        return (
+                          <div
+                            key={agentType}
+                            className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2 rounded-md border px-3 py-2"
+                            style={{
+                              borderColor: 'var(--color-border-subtle)',
+                              backgroundColor: 'rgba(255, 255, 255, 0.02)',
+                            }}
+                          >
+                            <div className="min-w-0">
+                              <div className="flex items-center gap-2 text-xs">
+                                <Terminal
+                                  className="size-4 shrink-0"
+                                  style={{ color: 'var(--color-text-muted)' }}
+                                />
+                                <span
+                                  className="font-medium"
+                                  style={{ color: 'var(--color-text-secondary)' }}
+                                >
+                                  {AGENT_TYPE_LABELS[agentType]}
+                                </span>
+                                <span style={{ color: 'var(--color-text-muted)' }}>
+                                  {harnessProviders.length > 0
+                                    ? `${harnessProviders.length} 个 Provider`
+                                    : '未配置 Provider'}
+                                </span>
+                              </div>
+                              <div
+                                className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px]"
+                                style={{ color: 'var(--color-text-muted)' }}
+                              >
+                                <span>Agent 类型：{agentType}</span>
+                                <span>Provider：{harnessProviders.length}</span>
+                              </div>
+                            </div>
+                            <div className="flex shrink-0 items-start gap-2">
+                              <button
+                                type="button"
+                                onClick={() => handleHarnessManage(agentType)}
+                                className="flex items-center gap-1 rounded-md border px-2 py-[3px] text-[10px] font-medium transition-colors hover:bg-white/5"
+                                style={{
+                                  borderColor: 'var(--color-border)',
+                                  color: 'var(--color-text-secondary)',
+                                }}
+                              >
+                                <SlidersHorizontal className="size-3" />
+                                配置
+                              </button>
+                            </div>
+                          </div>
+                        );
+                      }
+                      return (
+                      <div
+                        key={agentType}
+                        className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2 rounded-md border px-3 py-2"
+                        style={{
+                          borderColor: 'var(--color-border-subtle)',
+                          backgroundColor: 'rgba(255, 255, 255, 0.02)',
+                        }}
+                      >
+                        <div className="col-span-2 flex items-start justify-between gap-3">
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-center gap-2 text-xs">
+                              <span className="flex items-center gap-2">
+                                <ProviderBrandLogo
+                                  providerId={provider.providerId}
+                                  className="size-4 shrink-0"
+                                />
+                                <span
+                                  className="font-medium"
+                                  style={{ color: 'var(--color-text-secondary)' }}
+                                >
+                                  {provider.displayName}
+                                </span>
+                                {provider.providerId === 'codex' ? <ProviderBetaBadge /> : null}
+                              </span>
+                            </div>
+                            <div
+                              className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px]"
+                              style={{ color: 'var(--color-text-muted)' }}
+                            >
+                              <span>Agent 类型：{agentType}</span>
+                              <span>Provider：{harnessProviders.length}</span>
+                            </div>
+                          </div>
+                          <div className="flex shrink-0 items-start gap-2">
+                            <button
+                              type="button"
+                              onClick={() => handleProviderManage(provider.providerId)}
+                              className="flex items-center gap-1 rounded-md border px-2 py-[3px] text-[10px] font-medium transition-colors hover:bg-white/5 disabled:opacity-50"
+                              style={{
+                                borderColor: 'var(--color-border)',
+                                color: 'var(--color-text-secondary)',
+                              }}
+                            >
+                              <SlidersHorizontal className="size-3" />
+                              配置
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      );
+                    })}
+                  </div>
+              </div>
+            ) : (
+              <div className="space-y-2 text-sm" style={{ color: 'var(--color-text-secondary)' }}>
+                <div className="flex items-center gap-2">
+                  <AlertTriangle className="size-4 shrink-0" style={{ color: '#fbbf24' }} />
+                  {effectiveCliStatus.binaryPath && effectiveCliStatus.launchError
+                    ? `${runtimeDisplayName} was found but failed to start`
+                    : `${runtimeDisplayName} not installed`}
+                </div>
+                {effectiveCliStatus.showBinaryPath && effectiveCliStatus.binaryPath && (
+                  <div className="break-all font-mono text-xs text-text-muted">
+                    {effectiveCliStatus.binaryPath}
+                  </div>
+                )}
+                {effectiveCliStatus.launchError && (
+                  <div
+                    className="rounded border px-2 py-1.5 font-mono text-xs"
+                    style={{
+                      borderColor: 'rgba(245, 158, 11, 0.25)',
+                      backgroundColor: 'rgba(245, 158, 11, 0.06)',
+                      color: 'var(--color-text-muted)',
+                    }}
+                  >
+                    {effectiveCliStatus.launchError}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {!effectiveCliStatus.installed && !effectiveCliStatus.supportsSelfUpdate && (
+              <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                {effectiveCliStatus.binaryPath && effectiveCliStatus.launchError
+                  ? `已配置的 ${runtimeDisplayName} 未通过启动健康检查。`
+                  : `未找到已配置的 ${runtimeDisplayName}。`}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Downloading */}
+        {installerState === 'downloading' && (
+          <div className="space-y-2">
+            <div
+              className="flex items-center justify-between text-xs"
+              style={{ color: 'var(--color-text-secondary)' }}
+            >
+              <span>正在下载...</span>
+              <span>
+                {downloadTotal > 0
+                  ? `${formatBytes(downloadTransferred)} / ${formatBytes(downloadTotal)} (${downloadProgress}%)`
+                  : `${formatBytes(downloadTransferred)}`}
+              </span>
+            </div>
+            <div
+              className="h-1.5 w-full overflow-hidden rounded-full"
+              style={{ backgroundColor: 'var(--color-surface-raised)' }}
+            >
+              {downloadTotal > 0 ? (
+                <div
+                  className="h-full rounded-full transition-all duration-300"
+                  style={{
+                    width: `${downloadProgress}%`,
+                    backgroundColor: '#3b82f6',
+                  }}
+                />
+              ) : (
+                <div
+                  className="h-full w-1/3 animate-pulse rounded-full"
+                  style={{ backgroundColor: '#3b82f6' }}
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Checking */}
+        {installerState === 'checking' && (
+          <div
+            className="flex items-center gap-2 text-sm"
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
+            <Loader2 className="size-4 animate-spin" />
+            Checking latest version...
+          </div>
+        )}
+
+        {/* Verifying */}
+        {installerState === 'verifying' && (
+          <div
+            className="flex items-center gap-2 text-sm"
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
+            <Loader2 className="size-4 animate-spin" />
+            Verifying checksum...
+          </div>
+        )}
+
+        {/* Installing */}
+        {installerState === 'installing' && (
+          <div
+            className="flex items-center gap-2 text-sm"
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
+            <Loader2 className="size-4 animate-spin" />
+            正在安装...
+          </div>
+        )}
+
+        {/* Completed */}
+        {installerState === 'completed' && (
+          <div className="flex items-center gap-2 text-sm" style={{ color: '#4ade80' }}>
+            <CheckCircle className="size-4" />
+            已安装 v{completedVersion ?? 'latest'}
+          </div>
+        )}
+
+        {/* Error */}
+        {installerState === 'error' && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-sm" style={{ color: '#f87171' }}>
+              <AlertTriangle className="size-4" />
+              {installerError ?? '安装失败'}
+            </div>
+            <button
+              onClick={handleInstall}
+              className="flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-white/5"
+              style={{
+                borderColor: 'var(--color-border)',
+                color: 'var(--color-text-secondary)',
+              }}
+            >
+              <RefreshCw className="size-3.5" />
+              重试
+            </button>
+          </div>
+        )}
+      </div>
+      <ProviderRuntimeSettingsDialog
+        open={manageDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setManageDialogOpen(false);
+        }}
+        providers={visibleProviders.filter((provider) => provider.providerId === manageProviderId)}
+        projectPath={selectedProjectPath}
+        initialProviderId={manageProviderId}
+        providerStatusLoading={cliProviderStatusLoading}
+        disabled={isBusy || cliStatusLoading}
+        onSelectBackend={handleRuntimeBackendChange}
+        onRefreshProvider={(providerId) => fetchCliProviderStatus(providerId)}
+        onRequestLogin={(providerId) => setProviderTerminal({ providerId, action: 'login' })}
+      />
+      <GenericHarnessProviderDialog
+        agentType={genericHarnessAgentType}
+        providers={
+          genericHarnessAgentType ? (globalProvidersByAgentType.get(genericHarnessAgentType) ?? []) : []
+        }
+        loading={globalProvidersLoading}
+        error={globalProvidersError}
+        onRefresh={() => void refreshGlobalProviders()}
+        onClose={() => setGenericHarnessAgentType(null)}
+      />
+    </div>
+  );
+};
+
+interface GenericHarnessProviderDialogProps {
+  agentType: CcAgentType | null;
+  providers: GlobalProvider[];
+  loading: boolean;
+  error: string | null;
+  onRefresh: () => void;
+  onClose: () => void;
+}
+
+const GenericHarnessProviderDialog = ({
+  agentType,
+  providers,
+  loading,
+  error,
+  onRefresh,
+  onClose,
+}: GenericHarnessProviderDialogProps): React.JSX.Element => {
+  const open = agentType !== null;
+  const title = agentType ? AGENT_TYPE_LABELS[agentType] : 'Harness';
+  const [newProviderName, setNewProviderName] = useState('');
+  const [newProviderApiKey, setNewProviderApiKey] = useState('');
+  const [newProviderBaseUrl, setNewProviderBaseUrl] = useState('');
+  const [newProviderModel, setNewProviderModel] = useState('');
+  const [addingProvider, setAddingProvider] = useState(false);
+  const [addProviderError, setAddProviderError] = useState<string | null>(null);
+
+  const handleAddProvider = async (): Promise<void> => {
+    if (!agentType || !newProviderName.trim()) {
+      setAddProviderError('请填写 Provider 名称');
+      return;
+    }
+    setAddingProvider(true);
+    setAddProviderError(null);
+    try {
+      await providersApi.add({
+        name: newProviderName.trim(),
+        api_key: newProviderApiKey.trim() || undefined,
+        base_url: newProviderBaseUrl.trim() || undefined,
+        model: newProviderModel.trim() || undefined,
+        agent_types: [agentType],
+      });
+      setNewProviderName('');
+      setNewProviderApiKey('');
+      setNewProviderBaseUrl('');
+      setNewProviderModel('');
+      onRefresh();
+    } catch (err) {
+      setAddProviderError(err instanceof Error ? err.message : '添加 Provider 失败');
+    } finally {
+      setAddingProvider(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="w-[min(92vw,760px)] max-w-[min(92vw,760px)]">
+        <DialogHeader>
+          <DialogTitle>{title} 配置</DialogTitle>
+          <DialogDescription>
+            当前 Harness 支持多个 Provider。这里展示已绑定到该 Agent 类型的模型、端点和凭据状态。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <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)' }}>
+                保存后会自动绑定到 {title}。
+              </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>
+            {addProviderError ? <div className="text-xs text-red-400">{addProviderError}</div> : null}
+            <div className="flex justify-end">
+              <button
+                type="button"
+                onClick={() => void handleAddProvider()}
+                disabled={addingProvider}
+                className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-white/5 disabled:opacity-50"
+                style={{
+                  borderColor: 'var(--color-border)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                {addingProvider ? <Loader2 className="size-3 animate-spin" /> : null}
+                添加 Provider
+              </button>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between gap-3">
+            <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+              Agent 类型：{agentType ?? '-'}
+            </div>
+            <button
+              type="button"
+              onClick={onRefresh}
+              disabled={loading}
+              className="flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:bg-white/5 disabled:opacity-50"
+              style={{
+                borderColor: 'var(--color-border)',
+                color: 'var(--color-text-secondary)',
+              }}
+            >
+              <RefreshCw className={loading ? 'size-3 animate-spin' : 'size-3'} />
+              刷新
+            </button>
+          </div>
+
+          {error ? (
+            <div
+              className="rounded-md border px-3 py-2 text-xs"
+              style={{
+                borderColor: 'rgba(248, 113, 113, 0.25)',
+                backgroundColor: 'rgba(248, 113, 113, 0.06)',
+                color: '#fca5a5',
+              }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          {loading && providers.length === 0 ? (
+            <div
+              className="flex items-center gap-2 rounded-md border px-3 py-3 text-xs"
+              style={{
+                borderColor: 'var(--color-border-subtle)',
+                color: 'var(--color-text-muted)',
+              }}
+            >
+              <Loader2 className="size-3 animate-spin" />
+              正在加载 Provider...
+            </div>
+          ) : providers.length > 0 ? (
+            <div className="space-y-2">
+              {providers.map((provider) => {
+                const endpoint =
+                  (agentType
+                    ? (provider.endpoints as Record<string, string | undefined> | undefined)?.[
+                        agentType
+                      ]
+                    : undefined) ??
+                  provider.base_url ??
+                  '默认端点';
+                const model =
+                  (agentType
+                    ? (provider.agent_models as Record<string, string | undefined> | undefined)?.[
+                        agentType
+                      ]
+                    : undefined) ??
+                  provider.model ??
+                  provider.models?.[0]?.model ??
+                  '未指定模型';
+                return (
+                  <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>端点：{endpoint}</span>
+                      <span>模型：{model}</span>
+                      {provider.thinking ? <span>Thinking：{provider.thinking}</span> : null}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div
+              className="rounded-md border px-3 py-3 text-xs"
+              style={{
+                borderColor: 'var(--color-border-subtle)',
+                color: 'var(--color-text-muted)',
+              }}
+            >
+              当前还没有绑定到 {title} 的 Provider。请在 Hermit 配置中添加
+              `agent_types` 包含 `{agentType ?? 'agent'}` 的 Provider。
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};