2624 lines
104 KiB
TypeScript
2624 lines
104 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
|
import {
|
|
formatCodexCreditsValue,
|
|
formatCodexRemainingPercent,
|
|
formatCodexResetWindowLabel,
|
|
formatCodexUsagePercent,
|
|
formatCodexUsageWindowLabel,
|
|
formatCodexWindowDurationLong,
|
|
mergeCodexProviderStatusWithSnapshot,
|
|
normalizeCodexResetTimestamp,
|
|
useCodexAccountSnapshot,
|
|
} from '@features/codex-account/renderer';
|
|
import {
|
|
CODEX_FAST_CREDIT_COST_MULTIPLIER,
|
|
CODEX_FAST_MODEL_ID,
|
|
CODEX_FAST_SPEED_MULTIPLIER,
|
|
resolveCodexFastMode,
|
|
resolveCodexRuntimeSelection,
|
|
} from '@features/codex-runtime-profile/renderer';
|
|
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { RuntimeProviderManagementPanel } from '@features/runtime-provider-management/renderer';
|
|
import { api } from '@renderer/api';
|
|
import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
|
|
import {
|
|
CodexLoginLinkCopyButton,
|
|
CodexLoginUserCodeBadge,
|
|
} from '@renderer/components/runtime/CodexLoginLinkCopyButton';
|
|
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 { Label } from '@renderer/components/ui/label';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@renderer/components/ui/select';
|
|
import { Tabs, TabsList, TabsTrigger } from '@renderer/components/ui/tabs';
|
|
import { useStore } from '@renderer/store';
|
|
import { AlertTriangle, Download, Key, Link2, Loader2, Save, Trash2 } from 'lucide-react';
|
|
|
|
import {
|
|
isCodexProviderRuntimeMissing,
|
|
shouldOfferCodexRuntimeInstall,
|
|
} from './codexRuntimeInstallAction';
|
|
import {
|
|
formatProviderAuthMethodLabelForProvider,
|
|
formatProviderAuthModeLabelForProvider,
|
|
getProviderConnectLabel,
|
|
getProviderCurrentRuntimeSummary,
|
|
isConnectionManagedRuntimeProvider,
|
|
} from './providerConnectionUi';
|
|
import {
|
|
getProviderRuntimeBackendSummary,
|
|
getVisibleProviderRuntimeBackendOptions,
|
|
ProviderRuntimeBackendSelector,
|
|
} from './ProviderRuntimeBackendSelector';
|
|
|
|
import type { CodexRuntimeStatus } from '@features/codex-runtime-installer/contracts';
|
|
import type { CliProviderAuthMode, CliProviderId, CliProviderStatus } from '@shared/types';
|
|
import type { ApiKeyEntry } from '@shared/types/extensions';
|
|
|
|
type ApiKeyProviderId = 'anthropic' | 'codex' | 'gemini';
|
|
type PendingConnectionAction = 'auto' | 'oauth' | 'chatgpt' | 'api_key' | 'compatible' | null;
|
|
|
|
interface ConnectionMethodCardOption {
|
|
readonly authMode: CliProviderAuthMode;
|
|
readonly title: string;
|
|
readonly description: string;
|
|
}
|
|
|
|
interface Props {
|
|
readonly open: boolean;
|
|
readonly onOpenChange: (open: boolean) => void;
|
|
readonly providers: CliProviderStatus[];
|
|
readonly initialProviderId: CliProviderId;
|
|
readonly initialRuntimeProviderId?: string | null;
|
|
readonly initialRuntimeProviderAction?: 'connect' | 'select' | null;
|
|
readonly projectPath?: string | null;
|
|
readonly providerStatusLoading?: Partial<Record<CliProviderId, boolean>>;
|
|
readonly disabled?: boolean;
|
|
readonly codexRuntimeStatus?: CodexRuntimeStatus | null;
|
|
readonly codexRuntimeStatusLoading?: boolean;
|
|
readonly onInstallCodexRuntime?: () => Promise<void> | void;
|
|
readonly onSelectBackend: (providerId: CliProviderId, backendId: string) => Promise<void> | void;
|
|
readonly onRefreshProvider?: (providerId: CliProviderId) => Promise<void> | void;
|
|
readonly onRequestLogin?: (providerId: CliProviderId) => void;
|
|
}
|
|
|
|
const API_KEY_PROVIDER_CONFIG: Record<
|
|
ApiKeyProviderId,
|
|
{
|
|
envVarName: 'ANTHROPIC_API_KEY' | 'OPENAI_API_KEY' | 'GEMINI_API_KEY';
|
|
name: string;
|
|
title: string;
|
|
description: string;
|
|
placeholder: string;
|
|
}
|
|
> = {
|
|
anthropic: {
|
|
envVarName: 'ANTHROPIC_API_KEY',
|
|
name: 'Anthropic API Key',
|
|
title: 'API key',
|
|
description:
|
|
'Use a direct Anthropic API key for API-billed access. Your Anthropic subscription session stays available when you switch back.',
|
|
placeholder: 'sk-ant-...',
|
|
},
|
|
codex: {
|
|
envVarName: 'OPENAI_API_KEY',
|
|
name: 'Codex API Key',
|
|
title: 'API key',
|
|
description:
|
|
'Use an OpenAI API key as a secondary Codex auth path. If you switch Codex to API key mode, the app will mirror OPENAI_API_KEY into CODEX_API_KEY for native launches.',
|
|
placeholder: 'sk-proj-...',
|
|
},
|
|
gemini: {
|
|
envVarName: 'GEMINI_API_KEY',
|
|
name: 'Gemini API Key',
|
|
title: 'API access',
|
|
description:
|
|
'Use `GEMINI_API_KEY` for the Gemini API backend. CLI SDK and ADC do not require it.',
|
|
placeholder: 'AIza...',
|
|
},
|
|
};
|
|
|
|
const API_KEY_PROVIDER_TRANSLATION_KEYS = {
|
|
anthropic: {
|
|
name: 'providerRuntime.apiKey.providers.anthropic.name',
|
|
title: 'providerRuntime.apiKey.providers.anthropic.title',
|
|
description: 'providerRuntime.apiKey.providers.anthropic.description',
|
|
placeholder: 'providerRuntime.apiKey.providers.anthropic.placeholder',
|
|
},
|
|
codex: {
|
|
name: 'providerRuntime.apiKey.providers.codex.name',
|
|
title: 'providerRuntime.apiKey.providers.codex.title',
|
|
description: 'providerRuntime.apiKey.providers.codex.description',
|
|
placeholder: 'providerRuntime.apiKey.providers.codex.placeholder',
|
|
},
|
|
gemini: {
|
|
name: 'providerRuntime.apiKey.providers.gemini.name',
|
|
title: 'providerRuntime.apiKey.providers.gemini.title',
|
|
description: 'providerRuntime.apiKey.providers.gemini.description',
|
|
placeholder: 'providerRuntime.apiKey.providers.gemini.placeholder',
|
|
},
|
|
} as const satisfies Record<
|
|
ApiKeyProviderId,
|
|
{
|
|
name: string;
|
|
title: string;
|
|
description: string;
|
|
placeholder: string;
|
|
}
|
|
>;
|
|
|
|
const ANTHROPIC_COMPATIBLE_AUTH_TOKEN_ENV_VAR = 'ANTHROPIC_AUTH_TOKEN';
|
|
const ANTHROPIC_COMPATIBLE_AUTH_TOKEN_NAME = 'Anthropic-compatible Auth Token';
|
|
const FIRST_PARTY_ANTHROPIC_HOSTS = new Set(['api.anthropic.com', 'api-staging.anthropic.com']);
|
|
|
|
function isApiKeyProviderId(providerId: CliProviderId): providerId is ApiKeyProviderId {
|
|
return providerId === 'anthropic' || providerId === 'codex' || providerId === 'gemini';
|
|
}
|
|
|
|
function isCodexRuntimeInstalling(
|
|
status: CodexRuntimeStatus | null | undefined,
|
|
loading: boolean
|
|
): boolean {
|
|
return (
|
|
loading ||
|
|
status?.state === 'checking' ||
|
|
status?.state === 'downloading' ||
|
|
status?.state === 'installing'
|
|
);
|
|
}
|
|
|
|
function getCodexRuntimeInstallLabel(
|
|
status: CodexRuntimeStatus | null | undefined,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
switch (status?.state) {
|
|
case 'checking':
|
|
return t('providerRuntime.codex.install.checking');
|
|
case 'downloading':
|
|
return t('providerRuntime.codex.install.downloading');
|
|
case 'installing':
|
|
return t('providerRuntime.codex.install.installing');
|
|
case 'failed':
|
|
return t('providerRuntime.codex.install.retryInstall');
|
|
default:
|
|
return t('providerRuntime.codex.install.installCli');
|
|
}
|
|
}
|
|
|
|
function findPreferredApiKeyEntry(apiKeys: ApiKeyEntry[], envVarName: string): ApiKeyEntry | null {
|
|
const matches = apiKeys.filter((entry) => entry.envVarName === envVarName);
|
|
return matches.find((entry) => entry.scope === 'user') ?? null;
|
|
}
|
|
|
|
function validateAnthropicCompatibleBaseUrl(
|
|
value: string,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string | null {
|
|
const trimmed = value.trim();
|
|
if (!trimmed) {
|
|
return t('providerRuntime.compatibleEndpoint.validation.baseUrlRequired');
|
|
}
|
|
|
|
try {
|
|
const url = new URL(trimmed);
|
|
if (url.protocol !== 'http:' && url.protocol !== 'https:') {
|
|
return t('providerRuntime.compatibleEndpoint.validation.httpRequired');
|
|
}
|
|
if (url.username || url.password) {
|
|
return t('providerRuntime.compatibleEndpoint.validation.noCredentials');
|
|
}
|
|
if (FIRST_PARTY_ANTHROPIC_HOSTS.has(url.hostname)) {
|
|
return t('providerRuntime.compatibleEndpoint.validation.firstPartyAnthropic');
|
|
}
|
|
} catch {
|
|
return t('providerRuntime.compatibleEndpoint.validation.invalidUrl');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function getConnectionDescription(
|
|
provider: CliProviderStatus,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
switch (provider.providerId) {
|
|
case 'anthropic':
|
|
return t('providerRuntime.connection.descriptions.anthropic');
|
|
case 'codex':
|
|
return t('providerRuntime.connection.descriptions.codex');
|
|
case 'gemini':
|
|
return t('providerRuntime.connection.descriptions.gemini');
|
|
case 'opencode':
|
|
return t('providerRuntime.connection.descriptions.opencode');
|
|
}
|
|
}
|
|
|
|
function getRuntimeDescription(
|
|
provider: CliProviderStatus,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
switch (provider.providerId) {
|
|
case 'anthropic':
|
|
return t('providerRuntime.runtime.descriptions.anthropic');
|
|
case 'codex':
|
|
return t('providerRuntime.runtime.descriptions.codex');
|
|
case 'gemini':
|
|
return t('providerRuntime.runtime.descriptions.gemini');
|
|
case 'opencode':
|
|
return t('providerRuntime.runtime.descriptions.opencode');
|
|
}
|
|
}
|
|
|
|
function getAuthModeDescription(
|
|
providerId: CliProviderId,
|
|
authMode: CliProviderAuthMode,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
if (providerId === 'anthropic') {
|
|
switch (authMode) {
|
|
case 'auto':
|
|
return t('providerRuntime.authModeDescriptions.anthropic.auto');
|
|
case 'oauth':
|
|
return t('providerRuntime.authModeDescriptions.anthropic.oauth');
|
|
case 'api_key':
|
|
return t('providerRuntime.authModeDescriptions.anthropic.apiKey');
|
|
}
|
|
}
|
|
|
|
if (providerId === 'codex') {
|
|
switch (authMode) {
|
|
case 'auto':
|
|
return t('providerRuntime.authModeDescriptions.codex.auto');
|
|
case 'chatgpt':
|
|
return t('providerRuntime.authModeDescriptions.codex.chatgpt');
|
|
case 'api_key':
|
|
return t('providerRuntime.authModeDescriptions.codex.apiKey');
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
function getConnectionAlert(
|
|
provider: CliProviderStatus,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string | null {
|
|
const authMode = provider.connection?.configuredAuthMode;
|
|
const hasAnthropicSubscriptionSession =
|
|
provider.authMethod === 'oauth_token' || provider.authMethod === 'claude.ai';
|
|
|
|
if (provider.providerId === 'anthropic' && provider.connection?.compatibleEndpoint?.enabled) {
|
|
return provider.connection.compatibleEndpoint.tokenConfigured
|
|
? null
|
|
: t('providerRuntime.alerts.authTokenMissing');
|
|
}
|
|
|
|
if (
|
|
provider.providerId === 'anthropic' &&
|
|
authMode === 'api_key' &&
|
|
!provider.connection?.apiKeyConfigured
|
|
) {
|
|
return t('providerRuntime.alerts.anthropicApiKeyMissing');
|
|
}
|
|
|
|
if (
|
|
provider.providerId === 'anthropic' &&
|
|
authMode === 'oauth' &&
|
|
!hasAnthropicSubscriptionSession
|
|
) {
|
|
return t('providerRuntime.alerts.anthropicSubscriptionMissing');
|
|
}
|
|
|
|
if (
|
|
provider.providerId === 'anthropic' &&
|
|
authMode === 'auto' &&
|
|
provider.connection?.apiKeySource === 'stored'
|
|
) {
|
|
return t('providerRuntime.alerts.anthropicStoredKeyAvailable');
|
|
}
|
|
|
|
if (provider.providerId === 'codex') {
|
|
const codex = provider.connection?.codex;
|
|
if (codex?.login.status === 'starting') {
|
|
return t('providerRuntime.alerts.chatgptLoginStarting');
|
|
}
|
|
|
|
if (codex?.login.status === 'pending') {
|
|
return t('providerRuntime.alerts.chatgptLoginPending');
|
|
}
|
|
|
|
if (codex?.login.status === 'failed' && codex.login.error) {
|
|
return codex.login.error;
|
|
}
|
|
|
|
if (provider.connection?.configuredAuthMode === 'api_key') {
|
|
if (!provider.connection?.apiKeyConfigured) {
|
|
return t('providerRuntime.alerts.codexApiKeyMissing');
|
|
}
|
|
return null;
|
|
}
|
|
|
|
if (provider.connection?.configuredAuthMode === 'chatgpt' && !codex?.managedAccount) {
|
|
const missingChatgptMessage = codex?.localActiveChatgptAccountPresent
|
|
? t('providerRuntime.alerts.codexNeedsReconnect')
|
|
: codex?.localAccountArtifactsPresent
|
|
? t('providerRuntime.alerts.codexLocalArtifactsNoSession')
|
|
: t('providerRuntime.alerts.codexNoChatgptAccount');
|
|
return provider.connection.apiKeyConfigured
|
|
? t('providerRuntime.alerts.withApiKeyFallback', { message: missingChatgptMessage })
|
|
: missingChatgptMessage;
|
|
}
|
|
|
|
if (!codex?.launchAllowed && codex?.launchIssueMessage) {
|
|
return codex.launchIssueMessage;
|
|
}
|
|
|
|
if (codex?.appServerState === 'degraded' && codex.appServerStatusMessage) {
|
|
return codex.appServerStatusMessage;
|
|
}
|
|
|
|
if (!provider.connection?.apiKeyConfigured && !codex?.managedAccount) {
|
|
return t('providerRuntime.alerts.codexNoCredential');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
if (
|
|
provider.providerId === 'gemini' &&
|
|
provider.availableBackends?.some((option) => option.id === 'api' && !option.available)
|
|
) {
|
|
return t('providerRuntime.alerts.geminiApiUnavailable');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function getProviderUsageLabel(
|
|
provider: CliProviderStatus,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
if (provider.providerId === 'anthropic' && provider.connection?.compatibleEndpoint?.enabled) {
|
|
return t('providerRuntime.usage.compatibleEndpoint');
|
|
}
|
|
|
|
if (
|
|
provider.providerId === 'anthropic' &&
|
|
provider.connection?.configuredAuthMode === 'api_key'
|
|
) {
|
|
return provider.connection.apiKeyConfigured
|
|
? t('providerRuntime.usage.apiKey')
|
|
: t('providerRuntime.usage.apiKeyRequired');
|
|
}
|
|
|
|
return provider.authenticated
|
|
? t('providerRuntime.usage.usingMethod', {
|
|
method: formatProviderAuthMethodLabelForProvider(
|
|
provider.providerId,
|
|
provider.authMethod,
|
|
t
|
|
),
|
|
})
|
|
: provider.statusMessage || t('providerRuntime.usage.notConnected');
|
|
}
|
|
|
|
function getCompactOpenCodeProviderDetailMessage(detailMessage?: string | null): string | null {
|
|
const trimmed = detailMessage?.trim();
|
|
if (!trimmed) {
|
|
return null;
|
|
}
|
|
|
|
const firstInternalDetailIndex = [' - auth ', ' - behavior ', ' - managed ']
|
|
.map((marker) => trimmed.indexOf(marker))
|
|
.filter((index) => index >= 0)
|
|
.sort((left, right) => left - right)[0];
|
|
|
|
const compact =
|
|
typeof firstInternalDetailIndex === 'number'
|
|
? trimmed.slice(0, firstInternalDetailIndex).trim()
|
|
: trimmed;
|
|
return compact || null;
|
|
}
|
|
|
|
function getCodexAccountPanelHint(
|
|
provider: CliProviderStatus | null,
|
|
configuredAuthMode: CliProviderAuthMode | undefined,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string | null {
|
|
if (provider?.providerId !== 'codex') {
|
|
return null;
|
|
}
|
|
|
|
const codex = provider.connection?.codex;
|
|
if (!codex || codex.login.status === 'starting' || codex.login.status === 'pending') {
|
|
return null;
|
|
}
|
|
|
|
const hasActiveChatgptSession =
|
|
codex.effectiveAuthMode === 'chatgpt' && codex.launchAllowed === true;
|
|
|
|
if (hasActiveChatgptSession) {
|
|
if (!codex.rateLimits) {
|
|
return t('providerRuntime.codex.account.hints.usageLimitsAfterReport');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const usageSentence = codex.localActiveChatgptAccountPresent
|
|
? t('providerRuntime.codex.account.hints.reconnectBeforeUsage')
|
|
: codex.localAccountArtifactsPresent
|
|
? t('providerRuntime.codex.account.hints.localArtifactsNoSession')
|
|
: t('providerRuntime.codex.account.hints.noActiveAccount');
|
|
if (configuredAuthMode === 'chatgpt' && provider.connection?.apiKeyConfigured) {
|
|
return t('providerRuntime.codex.account.hints.detectedApiKeyNeedsApiMode', {
|
|
message: usageSentence,
|
|
});
|
|
}
|
|
|
|
if (configuredAuthMode === 'auto' && provider.connection?.apiKeyConfigured) {
|
|
return t('providerRuntime.codex.account.hints.autoUsesApiKeyUntilChatgpt', {
|
|
message: usageSentence,
|
|
});
|
|
}
|
|
|
|
return usageSentence;
|
|
}
|
|
|
|
function getCheckingStatusColor(): string {
|
|
return 'var(--color-text-secondary)';
|
|
}
|
|
|
|
function getProviderStatusColor(statusText: string | null, authenticated: boolean): string {
|
|
if (statusText === 'Checking...') {
|
|
return getCheckingStatusColor();
|
|
}
|
|
|
|
return authenticated ? '#4ade80' : 'var(--color-text-muted)';
|
|
}
|
|
|
|
function formatCodexResetDateTime(
|
|
timestampSeconds: number | null | undefined,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
const normalized = normalizeCodexResetTimestamp(timestampSeconds);
|
|
return normalized ? new Date(normalized).toLocaleString() : t('providerRuntime.status.unknown');
|
|
}
|
|
|
|
function formatLocalizedCodexUsageWindowLabel(
|
|
title: 'Primary used' | 'Secondary used' | 'Weekly used',
|
|
windowDurationMins: number | null | undefined,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
const titleByKey = {
|
|
'Primary used': t('providerRuntime.codex.rateLimits.primaryUsed'),
|
|
'Secondary used': t('providerRuntime.codex.rateLimits.secondaryUsed'),
|
|
'Weekly used': t('providerRuntime.codex.rateLimits.weeklyUsed'),
|
|
};
|
|
return formatCodexUsageWindowLabel(title, windowDurationMins).replace(title, titleByKey[title]);
|
|
}
|
|
|
|
function formatLocalizedCodexResetWindowLabel(
|
|
title: 'Primary reset' | 'Secondary reset' | 'Weekly reset',
|
|
windowDurationMins: number | null | undefined,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
const titleByKey = {
|
|
'Primary reset': t('providerRuntime.codex.rateLimits.primaryReset'),
|
|
'Secondary reset': t('providerRuntime.codex.rateLimits.secondaryReset'),
|
|
'Weekly reset': t('providerRuntime.codex.rateLimits.weeklyReset'),
|
|
};
|
|
return formatCodexResetWindowLabel(title, windowDurationMins).replace(title, titleByKey[title]);
|
|
}
|
|
|
|
function formatLocalizedCodexUsageExplanation(
|
|
usedPercent: number | null | undefined,
|
|
windowDurationMins: number | null | undefined,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string {
|
|
const windowLabel = formatCodexWindowDurationLong(windowDurationMins);
|
|
const remaining = formatCodexRemainingPercent(usedPercent);
|
|
|
|
if (windowLabel && remaining) {
|
|
return t('providerRuntime.codex.rateLimits.usageExplanationWithRemaining', {
|
|
used: formatCodexUsagePercent(usedPercent),
|
|
remaining,
|
|
window: windowLabel,
|
|
});
|
|
}
|
|
|
|
if (windowLabel) {
|
|
return t('providerRuntime.codex.rateLimits.usageExplanationWindowOnly', {
|
|
window: windowLabel,
|
|
});
|
|
}
|
|
|
|
return t('providerRuntime.codex.rateLimits.usageExplanationGeneric');
|
|
}
|
|
|
|
const CodexRateLimitWindowCard = ({
|
|
title,
|
|
usedLabel,
|
|
usedValue,
|
|
remainingValue,
|
|
resetLabel,
|
|
resetValue,
|
|
accent,
|
|
}: Readonly<{
|
|
title: string;
|
|
usedLabel: string;
|
|
usedValue: string;
|
|
remainingValue: string;
|
|
resetLabel: string;
|
|
resetValue: string;
|
|
accent: 'primary' | 'secondary';
|
|
}>): React.JSX.Element => {
|
|
const { t } = useAppTranslation('settings');
|
|
const accentStyles =
|
|
accent === 'primary'
|
|
? {
|
|
borderColor: 'rgba(74, 222, 128, 0.24)',
|
|
backgroundColor: 'rgba(74, 222, 128, 0.05)',
|
|
badgeColor: '#86efac',
|
|
badgeBackground: 'rgba(74, 222, 128, 0.14)',
|
|
}
|
|
: {
|
|
borderColor: 'rgba(125, 211, 252, 0.22)',
|
|
backgroundColor: 'rgba(125, 211, 252, 0.04)',
|
|
badgeColor: '#bae6fd',
|
|
badgeBackground: 'rgba(125, 211, 252, 0.14)',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="rounded-lg border px-4 py-3"
|
|
style={{
|
|
borderColor: accentStyles.borderColor,
|
|
backgroundColor: accentStyles.backgroundColor,
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{title}
|
|
</div>
|
|
<span
|
|
className="rounded-full px-2 py-0.5 text-[11px] font-medium"
|
|
style={{
|
|
color: accentStyles.badgeColor,
|
|
backgroundColor: accentStyles.badgeBackground,
|
|
}}
|
|
>
|
|
{remainingValue}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-3 grid gap-3 sm:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
|
|
<div className="space-y-1">
|
|
<div className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
|
|
{usedLabel}
|
|
</div>
|
|
<div
|
|
className="text-3xl font-semibold leading-none"
|
|
style={{ color: 'var(--color-text)' }}
|
|
>
|
|
{usedValue}
|
|
</div>
|
|
<div className="text-[11px]" style={{ color: 'var(--color-text-secondary)' }}>
|
|
{t('providerRuntime.codex.rateLimits.remainingLeft', { value: remainingValue })}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="rounded-md border px-3 py-2"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<div className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
|
|
{resetLabel}
|
|
</div>
|
|
<div className="mt-1 text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{resetValue}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function getConnectionMethodCardOptions(
|
|
provider: CliProviderStatus,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): ConnectionMethodCardOption[] | null {
|
|
switch (provider.providerId) {
|
|
case 'anthropic':
|
|
return [
|
|
{
|
|
authMode: 'auto',
|
|
title: t('providerRuntime.connectionCards.auto.title'),
|
|
description: t('providerRuntime.connectionCards.anthropic.autoDescription'),
|
|
},
|
|
{
|
|
authMode: 'oauth',
|
|
title: t('providerRuntime.connectionCards.anthropic.subscriptionTitle'),
|
|
description: t('providerRuntime.connectionCards.anthropic.subscriptionDescription'),
|
|
},
|
|
{
|
|
authMode: 'api_key',
|
|
title: t('providerRuntime.connectionCards.apiKey.title'),
|
|
description: t('providerRuntime.connectionCards.anthropic.apiKeyDescription'),
|
|
},
|
|
];
|
|
case 'codex':
|
|
return [
|
|
{
|
|
authMode: 'auto',
|
|
title: t('providerRuntime.connectionCards.auto.title'),
|
|
description: t('providerRuntime.connectionCards.codex.autoDescription'),
|
|
},
|
|
{
|
|
authMode: 'chatgpt',
|
|
title: t('providerRuntime.connectionCards.codex.chatgptTitle'),
|
|
description: t('providerRuntime.connectionCards.codex.chatgptDescription'),
|
|
},
|
|
{
|
|
authMode: 'api_key',
|
|
title: t('providerRuntime.connectionCards.apiKey.title'),
|
|
description: t('providerRuntime.connectionCards.codex.apiKeyDescription'),
|
|
},
|
|
];
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function getConnectionMethodCardsHint(
|
|
provider: CliProviderStatus,
|
|
t: ReturnType<typeof useAppTranslation>['t']
|
|
): string | null {
|
|
if (provider.providerId === 'codex') {
|
|
return t('providerRuntime.connectionCards.codex.hint');
|
|
}
|
|
|
|
if (provider.providerId === 'anthropic') {
|
|
return t('providerRuntime.connectionCards.anthropic.hint');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const ConnectionMethodCards = ({
|
|
options,
|
|
selectedAuthMode,
|
|
disabled,
|
|
connectionSaving,
|
|
pendingConnectionAction,
|
|
onSelect,
|
|
}: Readonly<{
|
|
options: ConnectionMethodCardOption[];
|
|
selectedAuthMode: CliProviderAuthMode;
|
|
disabled: boolean;
|
|
connectionSaving: boolean;
|
|
pendingConnectionAction: PendingConnectionAction;
|
|
onSelect: (authMode: CliProviderAuthMode) => void;
|
|
}>): React.JSX.Element => {
|
|
const { t } = useAppTranslation('settings');
|
|
const gridClassName =
|
|
options.length === 3 ? 'grid gap-2 md:grid-cols-3' : 'grid gap-2 sm:grid-cols-2';
|
|
|
|
return (
|
|
<div className={gridClassName}>
|
|
{options.map((option) => {
|
|
const selected = selectedAuthMode === option.authMode;
|
|
return (
|
|
<button
|
|
key={option.authMode}
|
|
type="button"
|
|
onClick={() => onSelect(option.authMode)}
|
|
disabled={disabled}
|
|
className="rounded-md border p-3 text-left transition-colors disabled:opacity-60"
|
|
style={{
|
|
borderColor: selected ? 'rgba(74, 222, 128, 0.32)' : 'var(--color-border-subtle)',
|
|
backgroundColor: selected ? 'rgba(74, 222, 128, 0.08)' : 'rgba(255, 255, 255, 0.02)',
|
|
}}
|
|
>
|
|
<div
|
|
className="flex items-center justify-between gap-2 text-sm font-medium"
|
|
style={{ color: 'var(--color-text)' }}
|
|
>
|
|
<span>{option.title}</span>
|
|
{connectionSaving && pendingConnectionAction === option.authMode ? (
|
|
<span
|
|
className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px]"
|
|
style={{
|
|
color: 'var(--color-text-secondary)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.08)',
|
|
}}
|
|
>
|
|
<Loader2 className="size-3 animate-spin" />
|
|
{t('providerRuntime.connection.switching')}
|
|
</span>
|
|
) : selected ? (
|
|
<span
|
|
className="rounded-full px-2 py-0.5 text-[11px]"
|
|
style={{
|
|
color: '#86efac',
|
|
backgroundColor: 'rgba(74, 222, 128, 0.14)',
|
|
}}
|
|
>
|
|
{t('providerRuntime.connection.selected')}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="mt-1 text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{option.description}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ProviderRuntimeSettingsDialog = ({
|
|
open,
|
|
onOpenChange,
|
|
providers,
|
|
initialProviderId,
|
|
initialRuntimeProviderId = null,
|
|
initialRuntimeProviderAction = null,
|
|
projectPath = null,
|
|
providerStatusLoading = {},
|
|
disabled = false,
|
|
codexRuntimeStatus = null,
|
|
codexRuntimeStatusLoading = false,
|
|
onInstallCodexRuntime,
|
|
onSelectBackend,
|
|
onRefreshProvider,
|
|
onRequestLogin,
|
|
}: Props): React.JSX.Element => {
|
|
const { t } = useAppTranslation('settings');
|
|
const [selectedProviderId, setSelectedProviderId] = useState<CliProviderId>(initialProviderId);
|
|
const [activeApiKeyFormProviderId, setActiveApiKeyFormProviderId] =
|
|
useState<ApiKeyProviderId | null>(null);
|
|
const [apiKeyValue, setApiKeyValue] = useState('');
|
|
const [apiKeyScope, setApiKeyScope] = useState<'user' | 'project'>('user');
|
|
const [apiKeyError, setApiKeyError] = useState<string | null>(null);
|
|
const [connectionError, setConnectionError] = useState<string | null>(null);
|
|
const [runtimeError, setRuntimeError] = useState<string | null>(null);
|
|
const [connectionSaving, setConnectionSaving] = useState(false);
|
|
const [runtimeSaving, setRuntimeSaving] = useState(false);
|
|
const [pendingConnectionAction, setPendingConnectionAction] =
|
|
useState<PendingConnectionAction>(null);
|
|
const [compatibleBaseUrl, setCompatibleBaseUrl] = useState('');
|
|
const [compatibleTokenValue, setCompatibleTokenValue] = useState('');
|
|
const [compatibleEndpointError, setCompatibleEndpointError] = useState<string | null>(null);
|
|
const [compatibleEndpointStatus, setCompatibleEndpointStatus] = useState<string | null>(null);
|
|
const apiKeyInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const apiKeys = useStore((s) => s.apiKeys);
|
|
const apiKeysLoading = useStore((s) => s.apiKeysLoading);
|
|
const apiKeysError = useStore((s) => s.apiKeysError);
|
|
const apiKeySaving = useStore((s) => s.apiKeySaving);
|
|
const apiKeyStorageStatus = useStore((s) => s.apiKeyStorageStatus);
|
|
const fetchApiKeys = useStore((s) => s.fetchApiKeys);
|
|
const fetchApiKeyStorageStatus = useStore((s) => s.fetchApiKeyStorageStatus);
|
|
const saveApiKey = useStore((s) => s.saveApiKey);
|
|
const deleteApiKey = useStore((s) => s.deleteApiKey);
|
|
const updateConfig = useStore((s) => s.updateConfig);
|
|
const appConfig = useStore((s) => s.appConfig);
|
|
const codexAccount = useCodexAccountSnapshot({
|
|
enabled: open && selectedProviderId === 'codex',
|
|
includeRateLimits: true,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
setSelectedProviderId(initialProviderId);
|
|
void fetchApiKeys();
|
|
void fetchApiKeyStorageStatus();
|
|
}, [fetchApiKeyStorageStatus, fetchApiKeys, initialProviderId, open]);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
return;
|
|
}
|
|
|
|
setActiveApiKeyFormProviderId(null);
|
|
setApiKeyValue('');
|
|
setApiKeyScope('user');
|
|
setApiKeyError(null);
|
|
setConnectionError(null);
|
|
setRuntimeError(null);
|
|
setConnectionSaving(false);
|
|
setRuntimeSaving(false);
|
|
setPendingConnectionAction(null);
|
|
setCompatibleBaseUrl('');
|
|
setCompatibleTokenValue('');
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
setConnectionError(null);
|
|
setRuntimeError(null);
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
}, [selectedProviderId]);
|
|
|
|
useEffect(() => {
|
|
if (selectedProviderId === 'codex' && codexAccount.error) {
|
|
setConnectionError(codexAccount.error);
|
|
}
|
|
}, [codexAccount.error, selectedProviderId]);
|
|
|
|
const statusSelectedProvider = useMemo(() => {
|
|
return (
|
|
providers.find((provider) => provider.providerId === selectedProviderId) ??
|
|
providers.find(
|
|
(provider) => provider.availableBackends && provider.availableBackends.length > 0
|
|
) ??
|
|
providers[0] ??
|
|
null
|
|
);
|
|
}, [providers, selectedProviderId]);
|
|
|
|
const statusApiKeyConfig =
|
|
statusSelectedProvider && isApiKeyProviderId(statusSelectedProvider.providerId)
|
|
? API_KEY_PROVIDER_CONFIG[statusSelectedProvider.providerId]
|
|
: null;
|
|
const selectedApiKey = statusApiKeyConfig
|
|
? findPreferredApiKeyEntry(apiKeys, statusApiKeyConfig.envVarName)
|
|
: null;
|
|
const anthropicCompatibleConfig = appConfig?.providerConnections?.anthropic
|
|
.compatibleEndpoint ?? {
|
|
enabled: false,
|
|
baseUrl: '',
|
|
};
|
|
const selectedCompatibleToken = findPreferredApiKeyEntry(
|
|
apiKeys,
|
|
ANTHROPIC_COMPATIBLE_AUTH_TOKEN_ENV_VAR
|
|
);
|
|
|
|
const selectedProvider = useMemo(() => {
|
|
const mergedStatusProvider =
|
|
statusSelectedProvider?.providerId === 'codex'
|
|
? mergeCodexProviderStatusWithSnapshot(statusSelectedProvider, codexAccount.snapshot)
|
|
: statusSelectedProvider;
|
|
|
|
if (!mergedStatusProvider?.connection) {
|
|
return mergedStatusProvider;
|
|
}
|
|
|
|
const nextConnection = {
|
|
...mergedStatusProvider.connection,
|
|
};
|
|
|
|
if (mergedStatusProvider.providerId === 'anthropic') {
|
|
nextConnection.configuredAuthMode =
|
|
appConfig?.providerConnections?.anthropic.authMode ??
|
|
mergedStatusProvider.connection.configuredAuthMode;
|
|
nextConnection.compatibleEndpoint = {
|
|
...(mergedStatusProvider.connection.compatibleEndpoint ?? {
|
|
enabled: false,
|
|
baseUrl: '',
|
|
tokenConfigured: false,
|
|
tokenSource: null,
|
|
tokenSourceLabel: null,
|
|
}),
|
|
enabled: anthropicCompatibleConfig.enabled,
|
|
baseUrl: anthropicCompatibleConfig.baseUrl,
|
|
};
|
|
if (selectedCompatibleToken) {
|
|
nextConnection.compatibleEndpoint.tokenConfigured = true;
|
|
nextConnection.compatibleEndpoint.tokenSource = 'stored';
|
|
nextConnection.compatibleEndpoint.tokenSourceLabel = t(
|
|
'providerRuntime.apiKey.storedInApp'
|
|
);
|
|
}
|
|
}
|
|
|
|
if (mergedStatusProvider.providerId === 'codex') {
|
|
nextConnection.configuredAuthMode =
|
|
appConfig?.providerConnections?.codex.preferredAuthMode ??
|
|
mergedStatusProvider.connection.configuredAuthMode;
|
|
}
|
|
|
|
if (statusApiKeyConfig) {
|
|
if (nextConnection.apiKeySource === 'stored') {
|
|
nextConnection.apiKeyConfigured = Boolean(selectedApiKey);
|
|
nextConnection.apiKeySource = selectedApiKey ? 'stored' : null;
|
|
nextConnection.apiKeySourceLabel = selectedApiKey
|
|
? t('providerRuntime.apiKey.storedInApp')
|
|
: null;
|
|
} else if (!nextConnection.apiKeyConfigured && selectedApiKey) {
|
|
nextConnection.apiKeyConfigured = true;
|
|
nextConnection.apiKeySource = 'stored';
|
|
nextConnection.apiKeySourceLabel = t('providerRuntime.apiKey.storedInApp');
|
|
}
|
|
}
|
|
|
|
return {
|
|
...mergedStatusProvider,
|
|
connection: nextConnection,
|
|
};
|
|
}, [
|
|
anthropicCompatibleConfig.baseUrl,
|
|
anthropicCompatibleConfig.enabled,
|
|
appConfig?.providerConnections?.anthropic.authMode,
|
|
appConfig?.providerConnections?.codex.preferredAuthMode,
|
|
codexAccount.snapshot,
|
|
selectedCompatibleToken,
|
|
selectedApiKey,
|
|
statusApiKeyConfig,
|
|
statusSelectedProvider,
|
|
t,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (!open || selectedProviderId !== 'anthropic') {
|
|
return;
|
|
}
|
|
|
|
setCompatibleBaseUrl(anthropicCompatibleConfig.baseUrl);
|
|
setCompatibleTokenValue('');
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
}, [anthropicCompatibleConfig.baseUrl, open, selectedProviderId]);
|
|
|
|
const selectedProviderLoading = selectedProvider
|
|
? providerStatusLoading[selectedProvider.providerId] === true
|
|
: false;
|
|
const runtimeSummary = selectedProvider
|
|
? getProviderRuntimeBackendSummary(selectedProvider)
|
|
: null;
|
|
const codexConnection =
|
|
selectedProvider?.providerId === 'codex' ? (selectedProvider.connection?.codex ?? null) : null;
|
|
const codexHasActiveChatgptSession =
|
|
codexConnection?.effectiveAuthMode === 'chatgpt' && codexConnection.launchAllowed === true;
|
|
const codexNeedsReconnect =
|
|
Boolean(codexConnection?.localActiveChatgptAccountPresent) && !codexHasActiveChatgptSession;
|
|
const codexLoginPending =
|
|
codexConnection?.login.status === 'starting' || codexConnection?.login.status === 'pending';
|
|
const codexLoginAuthUrl = codexConnection?.login.authUrl ?? null;
|
|
const codexLoginUserCode = codexConnection?.login.userCode ?? null;
|
|
const configurableAuthModes = selectedProvider?.connection?.configurableAuthModes ?? [];
|
|
const configuredAuthMode: CliProviderAuthMode | undefined =
|
|
selectedProvider?.connection?.configuredAuthMode ?? configurableAuthModes[0] ?? undefined;
|
|
const connectionMethodCardOptions = selectedProvider
|
|
? getConnectionMethodCardOptions(selectedProvider, t)
|
|
: null;
|
|
const showConnectionMethodCards =
|
|
connectionMethodCardOptions !== null && typeof configuredAuthMode !== 'undefined';
|
|
const managedRuntimeSummary = selectedProvider
|
|
? getProviderCurrentRuntimeSummary(selectedProvider, t)
|
|
: null;
|
|
const connectionManagedRuntime = selectedProvider
|
|
? isConnectionManagedRuntimeProvider(selectedProvider)
|
|
: false;
|
|
const showRuntimeProviderManagement = selectedProvider?.providerId === 'opencode';
|
|
const hideConnectionMethodMeta = showConnectionMethodCards;
|
|
const canConfigureRuntime =
|
|
!showRuntimeProviderManagement &&
|
|
!connectionManagedRuntime &&
|
|
(selectedProvider
|
|
? getVisibleProviderRuntimeBackendOptions(selectedProvider).length > 1
|
|
: false);
|
|
|
|
const apiKeyProviderId =
|
|
selectedProvider && isApiKeyProviderId(selectedProvider.providerId)
|
|
? selectedProvider.providerId
|
|
: null;
|
|
const apiKeyConfig = apiKeyProviderId ? API_KEY_PROVIDER_CONFIG[apiKeyProviderId] : null;
|
|
const apiKeyTranslationKeys = apiKeyProviderId
|
|
? API_KEY_PROVIDER_TRANSLATION_KEYS[apiKeyProviderId]
|
|
: null;
|
|
const apiKeyDisplayConfig = apiKeyTranslationKeys
|
|
? {
|
|
title: t(apiKeyTranslationKeys.title),
|
|
description: t(apiKeyTranslationKeys.description),
|
|
name: t(apiKeyTranslationKeys.name),
|
|
placeholder: t(apiKeyTranslationKeys.placeholder),
|
|
}
|
|
: null;
|
|
const showApiKeyForm =
|
|
selectedProvider &&
|
|
isApiKeyProviderId(selectedProvider.providerId) &&
|
|
activeApiKeyFormProviderId === selectedProvider.providerId;
|
|
const showApiKeySection = Boolean(
|
|
apiKeyConfig &&
|
|
(selectedProvider?.providerId !== 'codex' || !selectedProvider.connection?.supportsOAuth)
|
|
);
|
|
const connectionAlert = selectedProvider ? getConnectionAlert(selectedProvider, t) : null;
|
|
const connectionLoading =
|
|
selectedProviderLoading ||
|
|
connectionSaving ||
|
|
Boolean(selectedProvider?.providerId === 'codex' && codexAccount.loading && !codexConnection);
|
|
const connectionBusy = disabled || connectionLoading;
|
|
const codexActionBusy =
|
|
disabled || selectedProviderLoading || connectionSaving || codexAccount.loading;
|
|
const codexRuntimeInstallBusy = isCodexRuntimeInstalling(
|
|
codexRuntimeStatus,
|
|
codexRuntimeStatusLoading
|
|
);
|
|
const showCodexRuntimeInstallAction =
|
|
selectedProvider?.providerId === 'codex' &&
|
|
typeof onInstallCodexRuntime === 'function' &&
|
|
isCodexProviderRuntimeMissing(selectedProvider) &&
|
|
shouldOfferCodexRuntimeInstall(codexRuntimeStatus);
|
|
const runtimeBusy = disabled || selectedProviderLoading || runtimeSaving;
|
|
const anthropicFastModeCapability =
|
|
selectedProvider?.providerId === 'anthropic'
|
|
? (selectedProvider.runtimeCapabilities?.fastMode ?? null)
|
|
: null;
|
|
const anthropicFastModeEnabled =
|
|
appConfig?.providerConnections?.anthropic.fastModeDefault === true;
|
|
const anthropicFastModeSupported = anthropicFastModeCapability?.supported === true;
|
|
const anthropicFastModeAvailable = anthropicFastModeCapability?.available === true;
|
|
const anthropicFastModeDisabledReason =
|
|
anthropicFastModeCapability?.reason ??
|
|
(anthropicFastModeSupported
|
|
? t('providerRuntime.fastMode.unavailableForRuntime')
|
|
: t('providerRuntime.fastMode.notExposed'));
|
|
const connectionMethodCardsHint = selectedProvider
|
|
? getConnectionMethodCardsHint(selectedProvider, t)
|
|
: null;
|
|
const codexAccountPanelHint = getCodexAccountPanelHint(
|
|
selectedProvider ?? null,
|
|
configuredAuthMode,
|
|
t
|
|
);
|
|
const codexFastCapability = useMemo(() => {
|
|
if (selectedProvider?.providerId !== 'codex') {
|
|
return null;
|
|
}
|
|
const fastProbeModel =
|
|
selectedProvider.modelCatalog?.models.find((model) => model.supportsFastMode === true)
|
|
?.launchModel ?? CODEX_FAST_MODEL_ID;
|
|
const selection = resolveCodexRuntimeSelection({
|
|
source: {
|
|
providerStatus: selectedProvider,
|
|
accountSnapshot: codexAccount.snapshot,
|
|
},
|
|
selectedModel: fastProbeModel,
|
|
});
|
|
return resolveCodexFastMode({
|
|
selection,
|
|
selectedFastMode: 'on',
|
|
});
|
|
}, [codexAccount.snapshot, selectedProvider]);
|
|
const codexFastCapabilityHint =
|
|
selectedProvider?.providerId === 'codex' && codexFastCapability
|
|
? codexFastCapability.selectable
|
|
? `Fast mode can be enabled per team or schedule for Fast-capable Codex models with your ChatGPT account. It is about ${CODEX_FAST_SPEED_MULTIPLIER}x faster and costs ${CODEX_FAST_CREDIT_COST_MULTIPLIER}x credits.`
|
|
: (codexFastCapability.disabledReason ??
|
|
'Codex Fast mode is currently unavailable for this account or runtime.')
|
|
: null;
|
|
const hasSubscriptionSession =
|
|
selectedProvider?.providerId === 'anthropic'
|
|
? selectedProvider.authMethod === 'oauth_token' || selectedProvider.authMethod === 'claude.ai'
|
|
: false;
|
|
const canRequestSubscriptionLogin =
|
|
selectedProvider?.providerId === 'anthropic' &&
|
|
Boolean(selectedProvider.connection?.supportsOAuth && onRequestLogin) &&
|
|
selectedProvider.connection?.compatibleEndpoint?.enabled !== true &&
|
|
configuredAuthMode !== 'api_key' &&
|
|
selectedProvider.statusMessage !== 'Checking...' &&
|
|
(!selectedProvider?.authenticated || hasSubscriptionSession || configuredAuthMode === 'oauth');
|
|
const anthropicCompatibleEndpoint =
|
|
selectedProvider?.providerId === 'anthropic'
|
|
? (selectedProvider.connection?.compatibleEndpoint ?? null)
|
|
: null;
|
|
const anthropicCompatibleEndpointEnabled = anthropicCompatibleEndpoint?.enabled === true;
|
|
const anthropicCompatibleTokenConfigured = Boolean(
|
|
selectedCompatibleToken || anthropicCompatibleEndpoint?.tokenConfigured
|
|
);
|
|
const anthropicCompatibleTokenStatus =
|
|
selectedCompatibleToken?.maskedValue ??
|
|
anthropicCompatibleEndpoint?.tokenSourceLabel ??
|
|
(anthropicCompatibleTokenConfigured ? t('providerRuntime.status.configured') : null);
|
|
const anthropicCompatibleMissingToken =
|
|
anthropicCompatibleEndpointEnabled && !anthropicCompatibleTokenConfigured;
|
|
|
|
useEffect(() => {
|
|
if (!showApiKeyForm) {
|
|
return;
|
|
}
|
|
|
|
const frame = window.requestAnimationFrame(() => {
|
|
apiKeyInputRef.current?.focus({ preventScroll: true });
|
|
});
|
|
|
|
return () => window.cancelAnimationFrame(frame);
|
|
}, [selectedProvider?.providerId, showApiKeyForm]);
|
|
|
|
let connectionStatusLabel: string | null = null;
|
|
if (selectedProvider) {
|
|
if (!hideConnectionMethodMeta && selectedProvider.authenticated) {
|
|
connectionStatusLabel = getProviderUsageLabel(selectedProvider, t);
|
|
} else if (!hideConnectionMethodMeta) {
|
|
connectionStatusLabel = t('providerRuntime.usage.notConnected');
|
|
}
|
|
}
|
|
const showSelectedProviderSummary = Boolean(selectedProvider) && !connectionManagedRuntime;
|
|
const selectedProviderDetailMessage =
|
|
selectedProvider?.providerId === 'opencode'
|
|
? getCompactOpenCodeProviderDetailMessage(selectedProvider.detailMessage)
|
|
: (selectedProvider?.detailMessage ?? null);
|
|
const selectedProviderDiagnostics =
|
|
selectedProvider?.providerId === 'opencode'
|
|
? []
|
|
: (selectedProvider?.externalRuntimeDiagnostics ?? []);
|
|
|
|
const connectionProgressMessage = useMemo(() => {
|
|
if (!connectionLoading || !selectedProvider) {
|
|
return null;
|
|
}
|
|
|
|
if (connectionSaving) {
|
|
if (selectedProvider.providerId === 'anthropic') {
|
|
switch (pendingConnectionAction) {
|
|
case 'api_key':
|
|
return t('providerRuntime.progress.switchingApiKey');
|
|
case 'oauth':
|
|
return t('providerRuntime.progress.switchingAnthropicSubscription');
|
|
case 'auto':
|
|
return t('providerRuntime.progress.switchingAuto');
|
|
case 'compatible':
|
|
return t('providerRuntime.progress.savingCompatibleEndpoint');
|
|
default:
|
|
return t('providerRuntime.progress.applyingConnectionChanges');
|
|
}
|
|
}
|
|
|
|
if (selectedProvider.providerId === 'codex') {
|
|
switch (pendingConnectionAction) {
|
|
case 'chatgpt':
|
|
return t('providerRuntime.progress.switchingChatgpt');
|
|
case 'api_key':
|
|
return t('providerRuntime.progress.switchingApiKeyMode');
|
|
case 'auto':
|
|
return t('providerRuntime.progress.switchingAuto');
|
|
default:
|
|
return t('providerRuntime.progress.applyingConnectionChanges');
|
|
}
|
|
}
|
|
|
|
return t('providerRuntime.progress.applyingConnectionChanges');
|
|
}
|
|
|
|
return t('providerRuntime.progress.refreshingProviderStatus');
|
|
}, [connectionLoading, connectionSaving, pendingConnectionAction, selectedProvider, t]);
|
|
|
|
const handleStartApiKeyEdit = (): void => {
|
|
if (!selectedProvider || !isApiKeyProviderId(selectedProvider.providerId) || !apiKeyConfig) {
|
|
return;
|
|
}
|
|
|
|
setConnectionError(null);
|
|
setActiveApiKeyFormProviderId(selectedProvider.providerId);
|
|
setApiKeyScope(selectedApiKey?.scope ?? 'user');
|
|
setApiKeyValue('');
|
|
setApiKeyError(null);
|
|
};
|
|
|
|
const handleCancelApiKeyEdit = (): void => {
|
|
setActiveApiKeyFormProviderId(null);
|
|
setApiKeyValue('');
|
|
setApiKeyError(null);
|
|
};
|
|
|
|
const handleSaveApiKey = async (): Promise<void> => {
|
|
if (!selectedProvider || !isApiKeyProviderId(selectedProvider.providerId) || !apiKeyConfig) {
|
|
return;
|
|
}
|
|
|
|
if (!apiKeyValue.trim()) {
|
|
setApiKeyError(t('providerRuntime.errors.apiKeyRequired'));
|
|
return;
|
|
}
|
|
|
|
setApiKeyError(null);
|
|
setConnectionError(null);
|
|
try {
|
|
await saveApiKey({
|
|
id: selectedApiKey?.id,
|
|
name: apiKeyConfig.name,
|
|
envVarName: apiKeyConfig.envVarName,
|
|
value: apiKeyValue.trim(),
|
|
scope: apiKeyScope,
|
|
});
|
|
} catch (error) {
|
|
setApiKeyError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.saveApiKey')
|
|
);
|
|
return;
|
|
}
|
|
|
|
setActiveApiKeyFormProviderId(null);
|
|
setApiKeyValue('');
|
|
|
|
try {
|
|
await onRefreshProvider?.(selectedProvider.providerId);
|
|
} catch {
|
|
setConnectionError(t('providerRuntime.errors.apiKeySavedRefreshFailed'));
|
|
}
|
|
};
|
|
|
|
const handleDeleteApiKey = async (): Promise<void> => {
|
|
if (!selectedProvider || !selectedApiKey) {
|
|
return;
|
|
}
|
|
|
|
setApiKeyError(null);
|
|
setConnectionError(null);
|
|
try {
|
|
await deleteApiKey(selectedApiKey.id);
|
|
} catch (error) {
|
|
setApiKeyError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.deleteApiKey')
|
|
);
|
|
return;
|
|
}
|
|
|
|
setActiveApiKeyFormProviderId(null);
|
|
setApiKeyValue('');
|
|
|
|
try {
|
|
await onRefreshProvider?.(selectedProvider.providerId);
|
|
} catch {
|
|
setConnectionError(t('providerRuntime.errors.apiKeyDeletedRefreshFailed'));
|
|
}
|
|
};
|
|
|
|
const handleAuthModeChange = async (authMode: string): Promise<void> => {
|
|
if (selectedProvider?.providerId !== 'anthropic' && selectedProvider?.providerId !== 'codex') {
|
|
return;
|
|
}
|
|
|
|
const nextAuthMode = authMode as CliProviderAuthMode;
|
|
if (nextAuthMode === configuredAuthMode) {
|
|
return;
|
|
}
|
|
|
|
setConnectionSaving(true);
|
|
setPendingConnectionAction(nextAuthMode);
|
|
setConnectionError(null);
|
|
let updateSucceeded = false;
|
|
try {
|
|
if (selectedProvider.providerId === 'anthropic') {
|
|
await updateConfig('providerConnections', {
|
|
anthropic: {
|
|
authMode: nextAuthMode,
|
|
},
|
|
});
|
|
} else if (nextAuthMode !== 'oauth') {
|
|
await updateConfig('providerConnections', {
|
|
codex: {
|
|
preferredAuthMode: nextAuthMode,
|
|
},
|
|
});
|
|
await codexAccount.refresh({ includeRateLimits: true, forceRefreshToken: true });
|
|
}
|
|
|
|
updateSucceeded = true;
|
|
} catch (error) {
|
|
setConnectionError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.updateConnection')
|
|
);
|
|
} finally {
|
|
if (updateSucceeded) {
|
|
try {
|
|
await onRefreshProvider?.(selectedProvider.providerId);
|
|
} catch {
|
|
setConnectionError(t('providerRuntime.errors.connectionUpdatedRefreshFailed'));
|
|
}
|
|
}
|
|
|
|
setConnectionSaving(false);
|
|
setPendingConnectionAction(null);
|
|
}
|
|
};
|
|
|
|
const handleSaveAnthropicCompatibleEndpoint = async (): Promise<void> => {
|
|
if (selectedProvider?.providerId !== 'anthropic') {
|
|
return;
|
|
}
|
|
|
|
const baseUrl = compatibleBaseUrl.trim();
|
|
const validationError = validateAnthropicCompatibleBaseUrl(baseUrl, t);
|
|
if (validationError) {
|
|
setCompatibleEndpointError(validationError);
|
|
setCompatibleEndpointStatus(null);
|
|
return;
|
|
}
|
|
|
|
setConnectionSaving(true);
|
|
setPendingConnectionAction('compatible');
|
|
setConnectionError(null);
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
let updateSucceeded = false;
|
|
|
|
try {
|
|
if (compatibleTokenValue.trim()) {
|
|
await saveApiKey({
|
|
id: selectedCompatibleToken?.id,
|
|
name: ANTHROPIC_COMPATIBLE_AUTH_TOKEN_NAME,
|
|
envVarName: ANTHROPIC_COMPATIBLE_AUTH_TOKEN_ENV_VAR,
|
|
value: compatibleTokenValue.trim(),
|
|
scope: 'user',
|
|
});
|
|
}
|
|
|
|
await updateConfig('providerConnections', {
|
|
anthropic: {
|
|
compatibleEndpoint: {
|
|
enabled: true,
|
|
baseUrl,
|
|
},
|
|
},
|
|
});
|
|
updateSucceeded = true;
|
|
setCompatibleTokenValue('');
|
|
setCompatibleEndpointStatus(
|
|
compatibleTokenValue.trim() || anthropicCompatibleTokenConfigured
|
|
? t('providerRuntime.compatibleEndpoint.status.endpointSaved')
|
|
: t('providerRuntime.compatibleEndpoint.status.endpointSavedTokenMissing')
|
|
);
|
|
} catch (error) {
|
|
setCompatibleEndpointError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.saveEndpoint')
|
|
);
|
|
} finally {
|
|
if (updateSucceeded) {
|
|
try {
|
|
await onRefreshProvider?.('anthropic');
|
|
} catch {
|
|
setConnectionError(t('providerRuntime.errors.endpointSavedRefreshFailed'));
|
|
}
|
|
}
|
|
|
|
setConnectionSaving(false);
|
|
setPendingConnectionAction(null);
|
|
}
|
|
};
|
|
|
|
const handleDisableAnthropicCompatibleEndpoint = async (): Promise<void> => {
|
|
if (selectedProvider?.providerId !== 'anthropic') {
|
|
return;
|
|
}
|
|
|
|
setConnectionSaving(true);
|
|
setPendingConnectionAction('compatible');
|
|
setConnectionError(null);
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
let updateSucceeded = false;
|
|
|
|
try {
|
|
await updateConfig('providerConnections', {
|
|
anthropic: {
|
|
compatibleEndpoint: {
|
|
enabled: false,
|
|
baseUrl: compatibleBaseUrl.trim(),
|
|
},
|
|
},
|
|
});
|
|
updateSucceeded = true;
|
|
setCompatibleTokenValue('');
|
|
setCompatibleEndpointStatus(
|
|
t('providerRuntime.compatibleEndpoint.status.endpointDisabledTokenKept')
|
|
);
|
|
} catch (error) {
|
|
setCompatibleEndpointError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.disableEndpoint')
|
|
);
|
|
} finally {
|
|
if (updateSucceeded) {
|
|
try {
|
|
await onRefreshProvider?.('anthropic');
|
|
} catch {
|
|
setConnectionError(t('providerRuntime.errors.endpointDisabledRefreshFailed'));
|
|
}
|
|
}
|
|
|
|
setConnectionSaving(false);
|
|
setPendingConnectionAction(null);
|
|
}
|
|
};
|
|
|
|
const handleCodexAccountRefresh = async (): Promise<void> => {
|
|
setConnectionError(null);
|
|
try {
|
|
await codexAccount.refresh({ includeRateLimits: true, forceRefreshToken: true });
|
|
await onRefreshProvider?.('codex');
|
|
} catch (error) {
|
|
setConnectionError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.refreshCodexAccount')
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleCodexStartLogin = async (
|
|
mode: 'browser' | 'device_code' = 'browser'
|
|
): Promise<void> => {
|
|
setConnectionError(null);
|
|
const success = await codexAccount.startChatgptLogin(mode);
|
|
if (!success && codexAccount.error) {
|
|
setConnectionError(codexAccount.error);
|
|
}
|
|
};
|
|
|
|
const handleCodexCancelLogin = async (): Promise<void> => {
|
|
setConnectionError(null);
|
|
const success = await codexAccount.cancelChatgptLogin();
|
|
if (success) {
|
|
await onRefreshProvider?.('codex');
|
|
} else if (codexAccount.error) {
|
|
setConnectionError(codexAccount.error);
|
|
}
|
|
};
|
|
|
|
const handleCodexLogout = async (): Promise<void> => {
|
|
setConnectionError(null);
|
|
const success = await codexAccount.logout();
|
|
if (success) {
|
|
await onRefreshProvider?.('codex');
|
|
} else if (codexAccount.error) {
|
|
setConnectionError(codexAccount.error);
|
|
}
|
|
};
|
|
|
|
const handleRuntimeBackendSelect = async (
|
|
providerId: CliProviderId,
|
|
backendId: string
|
|
): Promise<void> => {
|
|
setRuntimeSaving(true);
|
|
setRuntimeError(null);
|
|
try {
|
|
await onSelectBackend(providerId, backendId);
|
|
} catch (error) {
|
|
setRuntimeError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.updateRuntimeBackend')
|
|
);
|
|
} finally {
|
|
setRuntimeSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleAnthropicFastModeDefaultChange = async (enabled: boolean): Promise<void> => {
|
|
if (selectedProvider?.providerId !== 'anthropic' || anthropicFastModeEnabled === enabled) {
|
|
return;
|
|
}
|
|
|
|
setConnectionSaving(true);
|
|
setConnectionError(null);
|
|
try {
|
|
await updateConfig('providerConnections', {
|
|
anthropic: {
|
|
fastModeDefault: enabled,
|
|
},
|
|
});
|
|
await onRefreshProvider?.('anthropic');
|
|
} catch (error) {
|
|
setConnectionError(
|
|
error instanceof Error ? error.message : t('providerRuntime.errors.updateAnthropicFastMode')
|
|
);
|
|
} finally {
|
|
setConnectionSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="w-[min(96vw,980px)] max-w-[min(96vw,980px)]">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('providerRuntime.title')}</DialogTitle>
|
|
<DialogDescription>{t('providerRuntime.description')}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="text-[11px] font-medium" style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('providerRuntime.provider')}
|
|
</div>
|
|
<Tabs
|
|
value={selectedProvider?.providerId ?? selectedProviderId}
|
|
onValueChange={(value) => setSelectedProviderId(value as CliProviderId)}
|
|
>
|
|
<div
|
|
className="-mx-1 border-b px-1"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<TabsList className="gap-1 rounded-b-none">
|
|
{providers.map((provider) => (
|
|
<TabsTrigger
|
|
key={provider.providerId}
|
|
value={provider.providerId}
|
|
className="relative rounded-b-none data-[state=active]:z-10 data-[state=active]:-mb-px data-[state=active]:bg-[var(--color-surface)] data-[state=active]:shadow-none data-[state=active]:after:absolute data-[state=active]:after:inset-x-0 data-[state=active]:after:-bottom-px data-[state=active]:after:h-1 data-[state=active]:after:bg-[var(--color-surface)] data-[state=active]:after:content-['']"
|
|
>
|
|
<span className="inline-flex items-center gap-2">
|
|
<ProviderBrandLogo
|
|
providerId={provider.providerId}
|
|
className="size-4 shrink-0"
|
|
/>
|
|
<span>{provider.displayName}</span>
|
|
</span>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{showSelectedProviderSummary && selectedProvider ? (
|
|
<div
|
|
className="rounded-lg border px-3 py-2.5"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.025)',
|
|
}}
|
|
>
|
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
<span className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{selectedProvider.displayName}
|
|
</span>
|
|
<span
|
|
className="text-xs"
|
|
style={{
|
|
color: getProviderStatusColor(
|
|
getProviderUsageLabel(selectedProvider, t),
|
|
selectedProvider.authenticated
|
|
),
|
|
}}
|
|
>
|
|
{getProviderUsageLabel(selectedProvider, t)}
|
|
</span>
|
|
{managedRuntimeSummary && !hideConnectionMethodMeta ? (
|
|
<span className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
|
|
{managedRuntimeSummary}
|
|
</span>
|
|
) : runtimeSummary ? (
|
|
<span className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
|
|
{t('providerRuntime.runtimeSummary', { runtime: runtimeSummary })}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{selectedProviderDetailMessage ? (
|
|
<div className="mt-2 text-xs" style={{ color: 'var(--color-text-secondary)' }}>
|
|
{selectedProviderDetailMessage}
|
|
</div>
|
|
) : null}
|
|
{selectedProviderDiagnostics.length > 0 ? (
|
|
<div
|
|
className="mt-2 space-y-1 text-[11px]"
|
|
style={{ color: 'var(--color-text-muted)' }}
|
|
>
|
|
{selectedProviderDiagnostics.slice(0, 3).map((diagnostic) => (
|
|
<div key={diagnostic.id}>
|
|
{diagnostic.label}:{' '}
|
|
{diagnostic.statusMessage ?? (diagnostic.detected ? 'detected' : 'missing')}
|
|
{diagnostic.detailMessage ? ` - ${diagnostic.detailMessage}` : ''}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedProvider ? (
|
|
showRuntimeProviderManagement ? (
|
|
<RuntimeProviderManagementPanel
|
|
runtimeId="opencode"
|
|
open={open}
|
|
projectPath={projectPath}
|
|
initialProviderId={initialRuntimeProviderId}
|
|
initialProviderAction={initialRuntimeProviderAction}
|
|
disabled={disabled || selectedProviderLoading}
|
|
onProviderChanged={() => onRefreshProvider?.('opencode')}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="space-y-3 rounded-lg border p-3"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.025)',
|
|
}}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{t('providerRuntime.connection.title')}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{getConnectionDescription(selectedProvider, t)}
|
|
</div>
|
|
{connectionProgressMessage ? (
|
|
<div
|
|
className="mt-2 inline-flex items-center gap-1.5 text-[11px]"
|
|
style={{ color: 'var(--color-text-secondary)' }}
|
|
>
|
|
<Loader2 className="size-3 animate-spin" />
|
|
<span>{connectionProgressMessage}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{canRequestSubscriptionLogin ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={connectionBusy}
|
|
onClick={() => onRequestLogin?.(selectedProvider.providerId)}
|
|
>
|
|
<Link2 className="mr-1 size-3.5" />
|
|
{selectedProvider.authenticated &&
|
|
(selectedProvider.authMethod === 'oauth_token' ||
|
|
selectedProvider.authMethod === 'claude.ai')
|
|
? t('providerRuntime.actions.reconnectAnthropic')
|
|
: getProviderConnectLabel(selectedProvider, t)}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
{showConnectionMethodCards ? (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">{t('providerRuntime.connection.method')}</Label>
|
|
<ConnectionMethodCards
|
|
options={connectionMethodCardOptions}
|
|
selectedAuthMode={configuredAuthMode}
|
|
disabled={connectionBusy}
|
|
connectionSaving={connectionSaving}
|
|
pendingConnectionAction={pendingConnectionAction}
|
|
onSelect={(authMode) => void handleAuthModeChange(authMode)}
|
|
/>
|
|
{connectionMethodCardsHint ? (
|
|
<div className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
|
|
{connectionMethodCardsHint}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : configurableAuthModes.length > 0 && configuredAuthMode ? (
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">
|
|
{selectedProvider.providerId === 'codex'
|
|
? t('providerRuntime.connection.method')
|
|
: t('providerRuntime.connection.authenticationMethod')}
|
|
</Label>
|
|
<Select
|
|
value={configuredAuthMode}
|
|
disabled={connectionBusy}
|
|
onValueChange={(value) => void handleAuthModeChange(value)}
|
|
>
|
|
<SelectTrigger className="h-9 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{configurableAuthModes.map((authMode) => (
|
|
<SelectItem key={authMode} value={authMode}>
|
|
{formatProviderAuthModeLabelForProvider(
|
|
selectedProvider.providerId,
|
|
authMode,
|
|
t
|
|
)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<div className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
|
|
{getAuthModeDescription(selectedProvider.providerId, configuredAuthMode, t)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedProvider.providerId === 'anthropic' ? (
|
|
<div
|
|
className="space-y-3 rounded-md border p-3"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{t('providerRuntime.compatibleEndpoint.title')}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('providerRuntime.compatibleEndpoint.description')}
|
|
</div>
|
|
</div>
|
|
<span
|
|
className="rounded-full px-2 py-0.5 text-[11px]"
|
|
style={{
|
|
color: anthropicCompatibleEndpointEnabled
|
|
? '#86efac'
|
|
: 'var(--color-text-muted)',
|
|
backgroundColor: anthropicCompatibleEndpointEnabled
|
|
? 'rgba(74, 222, 128, 0.14)'
|
|
: 'rgba(255, 255, 255, 0.05)',
|
|
}}
|
|
>
|
|
{anthropicCompatibleEndpointEnabled
|
|
? t('providerRuntime.status.enabled')
|
|
: t('providerRuntime.status.off')}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="anthropic-compatible-base-url" className="text-xs">
|
|
{t('providerRuntime.compatibleEndpoint.baseUrl')}
|
|
</Label>
|
|
<Input
|
|
id="anthropic-compatible-base-url"
|
|
value={compatibleBaseUrl}
|
|
onChange={(event) => {
|
|
setCompatibleBaseUrl(event.currentTarget.value);
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
}}
|
|
placeholder={t('runtimeProvider.compatibleEndpoint.baseUrlPlaceholder')}
|
|
className="h-9 text-sm"
|
|
disabled={connectionBusy}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="anthropic-compatible-auth-token" className="text-xs">
|
|
{t('providerRuntime.compatibleEndpoint.authToken')}
|
|
</Label>
|
|
<Input
|
|
id="anthropic-compatible-auth-token"
|
|
type="password"
|
|
value={compatibleTokenValue}
|
|
onChange={(event) => {
|
|
setCompatibleTokenValue(event.currentTarget.value);
|
|
setCompatibleEndpointError(null);
|
|
setCompatibleEndpointStatus(null);
|
|
}}
|
|
placeholder={
|
|
anthropicCompatibleTokenConfigured
|
|
? t('providerRuntime.compatibleEndpoint.keepSavedToken')
|
|
: 'lmstudio'
|
|
}
|
|
className="h-9 text-sm"
|
|
disabled={connectionBusy || apiKeySaving}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
<span
|
|
className="rounded-full px-2 py-0.5"
|
|
style={{
|
|
color: anthropicCompatibleTokenConfigured
|
|
? '#86efac'
|
|
: 'var(--color-text-muted)',
|
|
backgroundColor: anthropicCompatibleTokenConfigured
|
|
? 'rgba(74, 222, 128, 0.14)'
|
|
: 'rgba(255, 255, 255, 0.05)',
|
|
}}
|
|
>
|
|
{t('providerRuntime.compatibleEndpoint.tokenStatus', {
|
|
status: anthropicCompatibleTokenConfigured
|
|
? t('providerRuntime.status.configured')
|
|
: t('providerRuntime.status.notSet'),
|
|
})}
|
|
</span>
|
|
{anthropicCompatibleTokenStatus ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{anthropicCompatibleTokenStatus}
|
|
</span>
|
|
) : null}
|
|
{anthropicCompatibleEndpointEnabled &&
|
|
anthropicCompatibleEndpoint?.baseUrl ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{anthropicCompatibleEndpoint.baseUrl}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
{compatibleEndpointError ? (
|
|
<div
|
|
className="flex items-start gap-2 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',
|
|
}}
|
|
>
|
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>{compatibleEndpointError}</span>
|
|
</div>
|
|
) : compatibleEndpointStatus ? (
|
|
<div
|
|
className="rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
borderColor: 'rgba(74, 222, 128, 0.22)',
|
|
backgroundColor: 'rgba(74, 222, 128, 0.06)',
|
|
color: '#86efac',
|
|
}}
|
|
>
|
|
{compatibleEndpointStatus}
|
|
</div>
|
|
) : anthropicCompatibleMissingToken ? (
|
|
<div
|
|
className="flex items-start gap-2 rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
borderColor: 'rgba(245, 158, 11, 0.25)',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.06)',
|
|
color: '#fbbf24',
|
|
}}
|
|
>
|
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>{t('providerRuntime.compatibleEndpoint.authTokenMissing')}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex justify-end gap-2">
|
|
{anthropicCompatibleEndpointEnabled ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
disabled={connectionBusy}
|
|
onClick={() => void handleDisableAnthropicCompatibleEndpoint()}
|
|
>
|
|
{t('providerRuntime.actions.disable')}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
disabled={connectionBusy || apiKeySaving || !compatibleBaseUrl.trim()}
|
|
onClick={() => void handleSaveAnthropicCompatibleEndpoint()}
|
|
>
|
|
{connectionSaving && pendingConnectionAction === 'compatible' ? (
|
|
<Loader2 className="mr-1 size-3.5 animate-spin" />
|
|
) : (
|
|
<Save className="mr-1 size-3.5" />
|
|
)}
|
|
{t('providerRuntime.actions.saveEndpoint')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
{configuredAuthMode && !hideConnectionMethodMeta ? (
|
|
<span
|
|
className="rounded-full px-2 py-0.5"
|
|
style={{
|
|
color: 'var(--color-text-secondary)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
}}
|
|
>
|
|
{t('providerRuntime.connection.mode', {
|
|
mode: formatProviderAuthModeLabelForProvider(
|
|
selectedProvider.providerId,
|
|
configuredAuthMode,
|
|
t
|
|
),
|
|
})}
|
|
</span>
|
|
) : null}
|
|
{connectionStatusLabel ? (
|
|
<span
|
|
className="rounded-full px-2 py-0.5"
|
|
style={{
|
|
color: selectedProvider.authenticated
|
|
? '#86efac'
|
|
: 'var(--color-text-muted)',
|
|
backgroundColor: selectedProvider.authenticated
|
|
? 'rgba(74, 222, 128, 0.14)'
|
|
: 'rgba(255, 255, 255, 0.05)',
|
|
}}
|
|
>
|
|
{connectionStatusLabel}
|
|
</span>
|
|
) : null}
|
|
{selectedProvider.connection?.apiKeyConfigured && !showApiKeySection ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{selectedProvider.connection.apiKeySourceLabel}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
{selectedProvider.providerId === 'anthropic' ? (
|
|
<div
|
|
className="space-y-2 rounded-md border p-3"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{t('providerRuntime.fastMode.title')}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('providerRuntime.fastMode.description')}
|
|
</div>
|
|
{anthropicFastModeSupported ? (
|
|
<div className="inline-flex rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-0.5">
|
|
{[
|
|
{ enabled: false, label: t('providerRuntime.fastMode.defaultOff') },
|
|
{ enabled: true, label: t('providerRuntime.fastMode.preferFast') },
|
|
].map((option) => (
|
|
<button
|
|
key={option.label}
|
|
type="button"
|
|
className={`rounded-[3px] px-3 py-1 text-xs font-medium transition-colors ${
|
|
anthropicFastModeEnabled === option.enabled
|
|
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] shadow-sm'
|
|
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
|
}`}
|
|
disabled={connectionBusy || !anthropicFastModeAvailable}
|
|
onClick={() =>
|
|
void handleAnthropicFastModeDefaultChange(option.enabled)
|
|
}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
<div className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
|
|
{anthropicFastModeSupported && anthropicFastModeAvailable
|
|
? anthropicFastModeEnabled
|
|
? t('providerRuntime.fastMode.enabledHint')
|
|
: t('providerRuntime.fastMode.disabledHint')
|
|
: anthropicFastModeDisabledReason}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedProvider.providerId === 'codex' ? (
|
|
<div
|
|
className="space-y-3 rounded-md border p-3"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{t('providerRuntime.codex.account.title')}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('providerRuntime.codex.account.description')}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={codexActionBusy}
|
|
onClick={() => void handleCodexAccountRefresh()}
|
|
>
|
|
{t('providerRuntime.actions.refresh')}
|
|
</Button>
|
|
{showCodexRuntimeInstallAction ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={codexActionBusy || codexRuntimeInstallBusy}
|
|
title={
|
|
codexRuntimeStatus?.error ??
|
|
codexRuntimeStatus?.progress?.detail ??
|
|
t('providerRuntime.codex.install.title')
|
|
}
|
|
onClick={() => void onInstallCodexRuntime?.()}
|
|
>
|
|
{codexRuntimeInstallBusy ? (
|
|
<Loader2 className="mr-1 size-3.5 animate-spin" />
|
|
) : (
|
|
<Download className="mr-1 size-3.5" />
|
|
)}
|
|
{getCodexRuntimeInstallLabel(codexRuntimeStatus, t)}
|
|
</Button>
|
|
) : null}
|
|
{codexLoginPending ? (
|
|
<>
|
|
<CodexLoginLinkCopyButton
|
|
authUrl={codexLoginAuthUrl}
|
|
userCode={codexLoginUserCode}
|
|
disabled={codexActionBusy}
|
|
/>
|
|
<CodexLoginUserCodeBadge userCode={codexLoginUserCode} />
|
|
{codexLoginAuthUrl ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={codexActionBusy}
|
|
onClick={() => void api.openExternal(codexLoginAuthUrl)}
|
|
>
|
|
<Link2 className="mr-1 size-3.5" />
|
|
{t('providerRuntime.actions.openLogin')}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={codexActionBusy}
|
|
onClick={() => void handleCodexCancelLogin()}
|
|
>
|
|
{t('providerRuntime.actions.cancelLogin')}
|
|
</Button>
|
|
</>
|
|
) : codexHasActiveChatgptSession ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={codexActionBusy}
|
|
onClick={() => void handleCodexLogout()}
|
|
>
|
|
{t('providerRuntime.actions.disconnectAccount')}
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<CodexLoginLinkCopyButton
|
|
authUrl={codexLoginAuthUrl}
|
|
userCode={codexLoginUserCode}
|
|
disabled={codexActionBusy}
|
|
/>
|
|
<CodexLoginUserCodeBadge userCode={codexLoginUserCode} />
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={codexActionBusy}
|
|
onClick={() => void handleCodexStartLogin('device_code')}
|
|
>
|
|
<Link2 className="mr-1 size-3.5" />
|
|
{t('providerRuntime.actions.useCode')}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={codexActionBusy}
|
|
onClick={() => void handleCodexStartLogin('browser')}
|
|
>
|
|
<Link2 className="mr-1 size-3.5" />
|
|
{codexNeedsReconnect
|
|
? t('providerRuntime.actions.generateLink')
|
|
: t('providerRuntime.actions.connectChatGpt')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
<span
|
|
className="rounded-full px-2 py-0.5"
|
|
style={{
|
|
color: codexHasActiveChatgptSession
|
|
? '#86efac'
|
|
: codexNeedsReconnect
|
|
? '#fbbf24'
|
|
: 'var(--color-text-muted)',
|
|
backgroundColor: codexHasActiveChatgptSession
|
|
? 'rgba(74, 222, 128, 0.14)'
|
|
: codexNeedsReconnect
|
|
? 'rgba(245, 158, 11, 0.14)'
|
|
: 'rgba(255, 255, 255, 0.05)',
|
|
}}
|
|
>
|
|
{codexHasActiveChatgptSession
|
|
? t('providerRuntime.codex.account.connected')
|
|
: codexNeedsReconnect
|
|
? t('providerRuntime.codex.account.reconnectRequired')
|
|
: codexLoginPending
|
|
? t('providerRuntime.codex.account.loginInProgress')
|
|
: t('providerRuntime.usage.notConnected')}
|
|
</span>
|
|
{codexConnection ? (
|
|
<span
|
|
className="rounded-full px-2 py-0.5"
|
|
style={{
|
|
color:
|
|
codexConnection.appServerState === 'healthy'
|
|
? '#86efac'
|
|
: codexConnection.appServerState === 'degraded'
|
|
? '#fbbf24'
|
|
: '#fca5a5',
|
|
backgroundColor:
|
|
codexConnection.appServerState === 'healthy'
|
|
? 'rgba(74, 222, 128, 0.14)'
|
|
: codexConnection.appServerState === 'degraded'
|
|
? 'rgba(245, 158, 11, 0.12)'
|
|
: 'rgba(248, 113, 113, 0.08)',
|
|
}}
|
|
>
|
|
{t('providerRuntime.codex.account.appServer', {
|
|
state: codexConnection.appServerState,
|
|
})}
|
|
</span>
|
|
) : null}
|
|
{codexConnection?.managedAccount?.planType ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{t('providerRuntime.codex.account.plan', {
|
|
plan: codexConnection.managedAccount.planType,
|
|
})}
|
|
</span>
|
|
) : null}
|
|
{codexConnection?.managedAccount?.email ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{codexConnection.managedAccount.email}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
{codexAccountPanelHint ? (
|
|
<div
|
|
className="rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
color: 'var(--color-text-secondary)',
|
|
}}
|
|
>
|
|
{codexAccountPanelHint}
|
|
</div>
|
|
) : null}
|
|
|
|
{codexFastCapabilityHint ? (
|
|
<div
|
|
className="rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
borderColor: codexFastCapability?.selectable
|
|
? 'rgba(34, 197, 94, 0.28)'
|
|
: 'var(--color-border-subtle)',
|
|
color: codexFastCapability?.selectable
|
|
? '#86efac'
|
|
: 'var(--color-text-secondary)',
|
|
backgroundColor: codexFastCapability?.selectable
|
|
? 'rgba(34, 197, 94, 0.08)'
|
|
: 'transparent',
|
|
}}
|
|
>
|
|
{codexFastCapabilityHint}
|
|
</div>
|
|
) : null}
|
|
|
|
{codexConnection?.rateLimits ? (
|
|
<div className="space-y-2">
|
|
<div
|
|
className="rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
color: 'var(--color-text-secondary)',
|
|
}}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.usedQuotaNote')}{' '}
|
|
{formatLocalizedCodexUsageExplanation(
|
|
codexConnection.rateLimits.primary?.usedPercent,
|
|
codexConnection.rateLimits.primary?.windowDurationMins,
|
|
t
|
|
)}
|
|
{codexConnection.rateLimits.secondary
|
|
? t('providerRuntime.codex.rateLimits.secondaryWindowNote', {
|
|
window:
|
|
formatCodexWindowDurationLong(
|
|
codexConnection.rateLimits.secondary.windowDurationMins
|
|
) ?? t('providerRuntime.codex.rateLimits.secondaryFallback'),
|
|
})
|
|
: ''}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<CodexRateLimitWindowCard
|
|
title={t('providerRuntime.codex.rateLimits.primaryWindow')}
|
|
usedLabel={formatLocalizedCodexUsageWindowLabel(
|
|
'Primary used',
|
|
codexConnection.rateLimits.primary?.windowDurationMins,
|
|
t
|
|
)}
|
|
usedValue={formatCodexUsagePercent(
|
|
codexConnection.rateLimits.primary?.usedPercent
|
|
)}
|
|
remainingValue={
|
|
formatCodexRemainingPercent(
|
|
codexConnection.rateLimits.primary?.usedPercent
|
|
) ?? t('providerRuntime.codex.rateLimits.remainingUnknown')
|
|
}
|
|
resetLabel={formatLocalizedCodexResetWindowLabel(
|
|
'Primary reset',
|
|
codexConnection.rateLimits.primary?.windowDurationMins,
|
|
t
|
|
)}
|
|
resetValue={formatCodexResetDateTime(
|
|
codexConnection.rateLimits.primary?.resetsAt,
|
|
t
|
|
)}
|
|
accent="primary"
|
|
/>
|
|
|
|
{codexConnection.rateLimits.secondary ? (
|
|
<CodexRateLimitWindowCard
|
|
title={
|
|
codexConnection.rateLimits.secondary.windowDurationMins === 10_080
|
|
? t('providerRuntime.codex.rateLimits.weeklyWindow')
|
|
: t('providerRuntime.codex.rateLimits.secondaryWindow')
|
|
}
|
|
usedLabel={formatLocalizedCodexUsageWindowLabel(
|
|
codexConnection.rateLimits.secondary.windowDurationMins === 10_080
|
|
? 'Weekly used'
|
|
: 'Secondary used',
|
|
codexConnection.rateLimits.secondary.windowDurationMins,
|
|
t
|
|
)}
|
|
usedValue={formatCodexUsagePercent(
|
|
codexConnection.rateLimits.secondary.usedPercent
|
|
)}
|
|
remainingValue={
|
|
formatCodexRemainingPercent(
|
|
codexConnection.rateLimits.secondary.usedPercent
|
|
) ?? t('providerRuntime.codex.rateLimits.remainingUnknown')
|
|
}
|
|
resetLabel={formatLocalizedCodexResetWindowLabel(
|
|
codexConnection.rateLimits.secondary.windowDurationMins === 10_080
|
|
? 'Weekly reset'
|
|
: 'Secondary reset',
|
|
codexConnection.rateLimits.secondary.windowDurationMins,
|
|
t
|
|
)}
|
|
resetValue={formatCodexResetDateTime(
|
|
codexConnection.rateLimits.secondary.resetsAt,
|
|
t
|
|
)}
|
|
accent="secondary"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="rounded-lg border px-4 py-3"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.02)',
|
|
}}
|
|
>
|
|
<div
|
|
className="text-sm font-medium"
|
|
style={{ color: 'var(--color-text)' }}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.weeklyWindow')}
|
|
</div>
|
|
<div
|
|
className="mt-3 text-[11px]"
|
|
style={{ color: 'var(--color-text-muted)' }}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.weeklyUsedOneWeek')}
|
|
</div>
|
|
<div
|
|
className="mt-1 text-sm font-medium"
|
|
style={{ color: 'var(--color-text)' }}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.notReported')}
|
|
</div>
|
|
<div
|
|
className="mt-1 text-[11px]"
|
|
style={{ color: 'var(--color-text-secondary)' }}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.noSecondaryWindow')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className="rounded-lg border px-4 py-3"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.02)',
|
|
}}
|
|
>
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<div
|
|
className="text-[11px]"
|
|
style={{ color: 'var(--color-text-muted)' }}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.credits')}
|
|
</div>
|
|
<div
|
|
className="mt-1 text-sm font-medium"
|
|
style={{ color: 'var(--color-text)' }}
|
|
>
|
|
{formatCodexCreditsValue(codexConnection.rateLimits.credits)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="max-w-md text-[11px]"
|
|
style={{ color: 'var(--color-text-secondary)' }}
|
|
>
|
|
{t('providerRuntime.codex.rateLimits.creditsDescription')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{showApiKeySection && apiKeyConfig ? (
|
|
<div
|
|
className="space-y-3 rounded-md border p-3"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
data-testid="provider-api-key-icon"
|
|
className="flex size-8 shrink-0 items-center justify-center rounded-md border"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
backgroundColor: 'rgba(255,255,255,0.03)',
|
|
}}
|
|
>
|
|
<Key
|
|
className="size-3.5"
|
|
style={{ color: 'var(--color-text-muted)' }}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className="text-sm font-medium"
|
|
style={{ color: 'var(--color-text)' }}
|
|
>
|
|
{apiKeyDisplayConfig?.title ?? apiKeyConfig.title}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{apiKeyDisplayConfig?.description ?? apiKeyConfig.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!showApiKeyForm ? (
|
|
<Button size="sm" variant="outline" onClick={handleStartApiKeyEdit}>
|
|
{selectedApiKey
|
|
? t('providerRuntime.actions.replaceKey')
|
|
: t('providerRuntime.actions.setApiKey')}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
<span
|
|
className="rounded-full px-2 py-0.5"
|
|
style={{
|
|
color:
|
|
selectedProvider.connection?.apiKeyConfigured || selectedApiKey
|
|
? '#86efac'
|
|
: 'var(--color-text-muted)',
|
|
backgroundColor:
|
|
selectedProvider.connection?.apiKeyConfigured || selectedApiKey
|
|
? 'rgba(74, 222, 128, 0.14)'
|
|
: 'rgba(255, 255, 255, 0.05)',
|
|
}}
|
|
>
|
|
{selectedProvider.connection?.apiKeyConfigured || selectedApiKey
|
|
? t('providerRuntime.status.configured')
|
|
: t('providerRuntime.status.notConfigured')}
|
|
</span>
|
|
{selectedApiKey ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{selectedApiKey.maskedValue} · {selectedApiKey.scope}
|
|
</span>
|
|
) : selectedProvider.connection?.apiKeySource === 'environment' ? (
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>
|
|
{selectedProvider.connection.apiKeySourceLabel}
|
|
</span>
|
|
) : null}
|
|
{apiKeyStorageStatus && selectedApiKey ? (
|
|
<span style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('providerRuntime.apiKey.storedIn', {
|
|
backend: apiKeyStorageStatus.backend,
|
|
})}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
{showApiKeyForm ? (
|
|
<div
|
|
className="space-y-3 rounded-md border p-3"
|
|
style={{ borderColor: 'var(--color-border-subtle)' }}
|
|
>
|
|
<div className="space-y-1.5">
|
|
<Label
|
|
htmlFor={`${selectedProvider.providerId}-api-key`}
|
|
className="text-xs"
|
|
>
|
|
{apiKeyDisplayConfig?.name ?? apiKeyConfig.name}
|
|
</Label>
|
|
<Input
|
|
ref={apiKeyInputRef}
|
|
id={`${selectedProvider.providerId}-api-key`}
|
|
type="password"
|
|
value={apiKeyValue}
|
|
onChange={(e) => setApiKeyValue(e.target.value)}
|
|
placeholder={
|
|
apiKeyDisplayConfig?.placeholder ?? apiKeyConfig.placeholder
|
|
}
|
|
className="h-9 text-sm"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">{t('providerRuntime.apiKey.scope')}</Label>
|
|
<Select
|
|
value={apiKeyScope}
|
|
onValueChange={(value) => setApiKeyScope(value as 'user' | 'project')}
|
|
>
|
|
<SelectTrigger className="h-9 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="user">
|
|
{t('providerRuntime.apiKey.userScope')}
|
|
</SelectItem>
|
|
<SelectItem value="project">
|
|
{t('providerRuntime.apiKey.projectScope')}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{(apiKeyError || apiKeysError) && (
|
|
<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',
|
|
}}
|
|
>
|
|
{apiKeyError ?? apiKeysError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-between gap-2">
|
|
{selectedApiKey ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => void handleDeleteApiKey()}
|
|
disabled={apiKeySaving}
|
|
>
|
|
<Trash2 className="mr-1 size-3.5" />
|
|
{t('providerRuntime.actions.delete')}
|
|
</Button>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleCancelApiKeyEdit}
|
|
>
|
|
{t('providerRuntime.actions.cancel')}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
onClick={() => void handleSaveApiKey()}
|
|
disabled={apiKeySaving || !apiKeyValue.trim()}
|
|
>
|
|
{apiKeySaving
|
|
? t('providerRuntime.actions.saving')
|
|
: selectedApiKey
|
|
? t('providerRuntime.actions.updateKey')
|
|
: t('providerRuntime.actions.saveKey')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{connectionError ? (
|
|
<div
|
|
className="flex items-start gap-2 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',
|
|
}}
|
|
>
|
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>{connectionError}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
{connectionAlert ? (
|
|
<div
|
|
className="flex items-start gap-2 rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
borderColor: 'rgba(245, 158, 11, 0.25)',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.06)',
|
|
color: '#fbbf24',
|
|
}}
|
|
>
|
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>{connectionAlert}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
{apiKeysLoading && !selectedApiKey ? (
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{t('providerRuntime.apiKey.loadingStoredCredentials')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
) : null}
|
|
|
|
{selectedProvider && canConfigureRuntime ? (
|
|
<div
|
|
className="space-y-3 rounded-lg border p-3"
|
|
style={{
|
|
borderColor: 'var(--color-border-subtle)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.025)',
|
|
}}
|
|
>
|
|
<div>
|
|
<div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
|
|
{t('providerRuntime.runtime.title')}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
|
|
{getRuntimeDescription(selectedProvider, t)}
|
|
</div>
|
|
</div>
|
|
|
|
<ProviderRuntimeBackendSelector
|
|
provider={selectedProvider}
|
|
disabled={runtimeBusy}
|
|
onSelect={(providerId, backendId) =>
|
|
void handleRuntimeBackendSelect(providerId, backendId)
|
|
}
|
|
/>
|
|
|
|
{runtimeSaving ? (
|
|
<div
|
|
className="inline-flex items-center gap-1.5 text-[11px]"
|
|
style={{ color: 'var(--color-text-secondary)' }}
|
|
>
|
|
<Loader2 className="size-3 animate-spin" />
|
|
<span>{t('providerRuntime.runtime.updating')}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
{runtimeError ? (
|
|
<div
|
|
className="flex items-start gap-2 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',
|
|
}}
|
|
>
|
|
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>{runtimeError}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|