wangxuming/makelore
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: update Makelore modules and conversations
Some checks failed
Electron E2E / Electron E2E (macos-latest) (push) Has been cancelled
Details
Electron E2E / Electron E2E (ubuntu-latest) (push) Has been cancelled
Details
Electron E2E / Electron E2E (windows-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
inman
2026-07-31 10:08:41 +08:00
parent b8ca3f8eea
commit 80e8386fa6
175 changed files with 8036 additions and 10581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/settings/ProvidersSettings.tsx
View File

@@ -39,7 +39,6 @@ import {
resolveProviderApiKeyForSave,
resolveProviderModelForSave,
shouldShowProviderModelId,
shouldInvertInDark,
} from '@/lib/providers';
import {
buildProviderAccountId,
@@ -57,8 +56,8 @@ import { useAuthStore } from '@/stores/auth';
import { hostApiFetch } from '@/lib/host-api';
import { subscribeHostEvent } from '@/lib/host-events';
const inputClasses = 'h-[44px] rounded-xl font-mono text-meta bg-surface-input border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40';
const labelClasses = 'text-sm text-foreground/80 font-bold';
const inputClasses = 'h-[44px] rounded-xl font-mono text-meta bg-surface-input border-border/70 focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:border-brand shadow-sm transition-all text-foreground placeholder:text-foreground/40';
const labelClasses = 'text-sm text-foreground/80 font-medium';
type ArkMode = 'apikey' | 'codeplan';
function normalizeFallbackProviderIds(ids?: string[]): string[] {
@@ -317,7 +316,7 @@ export function ProvidersSettings() {
return (
<div data-testid="providers-settings" className="space-y-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<h2 data-testid="providers-settings-title" className="text-3xl font-serif text-foreground font-normal tracking-tight">
<h2 data-testid="providers-settings-title" className="text-2xl font-semibold tracking-[-0.03em] text-foreground">
{t('aiProviders.title', 'AI Providers')}
</h2>
<div className="flex flex-wrap items-center gap-2">
@@ -343,11 +342,11 @@ export function ProvidersSettings() {
</div>
{loading ? (
<div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
<div className="flex items-center justify-center py-12 text-muted-foreground bg-surface-subtle rounded-3xl border border-transparent border-dashed">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : displayProviders.length === 0 ? (
<div data-testid="providers-empty-state" className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
<div data-testid="providers-empty-state" className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-surface-subtle rounded-3xl border border-transparent border-dashed">
<Key className="h-12 w-12 mb-4 opacity-50" />
<h3 className="text-sm font-medium mb-1 text-foreground">{t('aiProviders.empty.title')}</h3>
<p className="text-meta text-center mb-6 max-w-sm">
@@ -592,27 +591,27 @@ function ProviderCard({
};
const currentInputClasses = isDefault
? "h-[40px] rounded-xl font-mono text-meta bg-white dark:bg-card border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
? "h-[40px] rounded-xl font-mono text-meta bg-background border-border/70 focus-visible:ring-2 focus-visible:ring-brand/35 shadow-sm"
: inputClasses;
const currentLabelClasses = isDefault ? "text-meta text-muted-foreground" : labelClasses;
const currentSectionLabelClasses = isDefault ? "text-sm font-bold text-foreground/80" : labelClasses;
const currentSectionLabelClasses = isDefault ? "text-sm font-medium text-foreground/80" : labelClasses;
return (
<div
data-testid={`provider-card-${account.id}`}
className={cn(
"group flex flex-col p-4 rounded-2xl transition-all relative overflow-hidden hover:bg-black/5 dark:hover:bg-white/5",
"group flex flex-col p-4 rounded-2xl transition-all relative overflow-hidden hover:bg-surface-subtle",
isDefault
? "bg-black/[0.04] dark:bg-white/[0.06] border border-transparent"
? "bg-surface-subtle border border-transparent"
: "bg-transparent border border-transparent"
)}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="h-[42px] w-[42px] shrink-0 flex items-center justify-center text-foreground border border-black/5 dark:border-white/10 rounded-full bg-black/5 dark:bg-white/5 shadow-sm group-hover:scale-105 transition-transform">
<div className="h-[42px] w-[42px] shrink-0 flex items-center justify-center text-foreground border border-border/70 border-border/70 rounded-full bg-surface-subtle shadow-sm group-hover:scale-105 transition-transform">
{getProviderIconUrl(account.vendorId) ? (
<img src={getProviderIconUrl(account.vendorId)} alt={typeInfo?.name || account.vendorId} className={cn('h-5 w-5', shouldInvertInDark(account.vendorId) && 'dark:invert')} />
<img src={getProviderIconUrl(account.vendorId)} alt={typeInfo?.name || account.vendorId} className="h-5 w-5" />
) : (
<span className="text-xl">{vendor?.icon || typeInfo?.icon || '⚙️'}</span>
)}
@@ -621,7 +620,7 @@ function ProviderCard({
<div className="flex items-center gap-2">
<span className="font-semibold text-sm">{account.label}</span>
{isDefault && (
<span className="flex items-center gap-1 font-mono text-2xs font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
<span className="flex items-center gap-1 font-mono text-2xs font-medium px-2 py-0.5 rounded-full bg-surface-subtle border-0 shadow-none text-foreground/70">
<Check className="h-3 w-3" />
{t('aiProviders.card.default')}
</span>
@@ -629,15 +628,15 @@ function ProviderCard({
</div>
<div className="flex items-center gap-2 mt-0.5 text-meta text-muted-foreground">
<span className="capitalize">{vendor?.name || account.vendorId}</span>
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
<span className="w-1 h-1 rounded-full bg-foreground/20" />
<span>{getAuthModeLabel(account.authMode, t)}</span>
{account.model && (
<>
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
<span className="w-1 h-1 rounded-full bg-foreground/20" />
<span className="truncate max-w-[200px]">{account.model}</span>
</>
)}
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
<span className="w-1 h-1 rounded-full bg-foreground/20" />
<span className="flex items-center gap-1">
{hasConfiguredCredentials(account, status) ? (
<><div className="w-1.5 h-1.5 rounded-full bg-green-500" /> {t('aiProviders.card.configured')}</>
@@ -647,7 +646,7 @@ function ProviderCard({
</span>
{((account.fallbackModels?.length ?? 0) > 0 || (account.fallbackAccountIds?.length ?? 0) > 0) && (
<>
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
<span className="w-1 h-1 rounded-full bg-foreground/20" />
<span className="truncate max-w-[150px]" title={t('aiProviders.sections.fallback')}>
{t('aiProviders.sections.fallback')}: {[
...normalizeFallbackModels(account.fallbackModels),
@@ -669,7 +668,7 @@ function ProviderCard({
data-testid={`provider-set-default-${account.id}`}
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-blue-600 hover:bg-white dark:hover:bg-card shadow-sm"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-brand-hover hover:bg-background hover:bg-surface-subtle shadow-sm"
onClick={onSetDefault}
title={t('aiProviders.card.setDefault')}
>
@@ -680,7 +679,7 @@ function ProviderCard({
data-testid={`provider-edit-${account.id}`}
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-white dark:hover:bg-card shadow-sm"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-background hover:bg-surface-subtle shadow-sm"
onClick={onEdit}
title={t('aiProviders.card.editKey')}
>
@@ -690,7 +689,7 @@ function ProviderCard({
data-testid={`provider-delete-${account.id}`}
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-white dark:hover:bg-card shadow-sm"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-background hover:bg-surface-subtle shadow-sm"
onClick={onDelete}
title={t('aiProviders.card.delete')}
>
@@ -701,14 +700,14 @@ function ProviderCard({
</div>
{isEditing && (
<div className="space-y-6 mt-4 pt-4 border-t border-black/5 dark:border-white/5">
<div className="space-y-6 mt-4 pt-4 border-t border-border/70">
{effectiveDocsUrl && (
<div className="flex justify-end -mt-2 mb-2">
<a
href={effectiveDocsUrl}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-blue-500 hover:text-blue-600 font-medium inline-flex items-center gap-1"
className="text-xs text-brand hover:text-brand-hover font-medium inline-flex items-center gap-1"
>
{t('aiProviders.dialog.customDoc')}
<ExternalLink className="h-3 w-3" />
@@ -752,7 +751,7 @@ function ProviderCard({
href={typeInfo.codePlanDocsUrl}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-blue-500 hover:text-blue-600 font-medium inline-flex items-center gap-1"
className="text-xs text-brand hover:text-brand-hover font-medium inline-flex items-center gap-1"
>
{t('aiProviders.dialog.codePlanDoc')}
<ExternalLink className="h-3 w-3" />
@@ -769,7 +768,7 @@ function ProviderCard({
setModelId(typeInfo?.defaultModelId || '');
}
}}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.authModes.apiKey')}
</button>
@@ -780,7 +779,7 @@ function ProviderCard({
setBaseUrl(codePlanPreset.baseUrl);
setModelId(codePlanPreset.modelId);
}}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.dialog.codePlanMode')}
</button>
@@ -799,21 +798,21 @@ function ProviderCard({
<button
type="button"
onClick={() => setApiProtocol('openai-completions')}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.protocols.openaiCompletions', 'OpenAI Completions')}
</button>
<button
type="button"
onClick={() => setApiProtocol('openai-responses')}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.protocols.openaiResponses', 'OpenAI Responses')}
</button>
<button
type="button"
onClick={() => setApiProtocol('anthropic-messages')}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.protocols.anthropic', 'Anthropic')}
</button>
@@ -836,7 +835,7 @@ function ProviderCard({
<div className="space-y-3">
<button
onClick={() => setShowFallback(!showFallback)}
className="flex items-center justify-between w-full text-sm font-bold text-foreground/80 hover:text-foreground transition-colors"
className="flex items-center justify-between w-full text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
>
<span>{t('aiProviders.sections.fallback')}</span>
<ChevronDown className={cn("h-4 w-4 transition-transform", showFallback && "rotate-180")} />
@@ -850,8 +849,8 @@ function ProviderCard({
onChange={(e) => setFallbackModelsText(e.target.value)}
placeholder={t('aiProviders.dialog.fallbackModelIdsPlaceholder')}
className={isDefault
? "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-card px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
: "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-surface-input px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"}
? "min-h-24 w-full rounded-xl border border-border/70 bg-background px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-brand/35 shadow-sm"
: "min-h-24 w-full rounded-xl border border-border/70 bg-surface-input px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:border-brand shadow-sm transition-all text-foreground placeholder:text-foreground/40"}
/>
<p className="text-xs text-muted-foreground">
{t('aiProviders.dialog.fallbackModelIdsHelp')}
@@ -862,16 +861,16 @@ function ProviderCard({
{fallbackOptions.length === 0 ? (
<p className="text-meta text-muted-foreground">{t('aiProviders.dialog.noFallbackOptions')}</p>
) : (
<div className={cn("space-y-2 rounded-xl border border-black/10 dark:border-white/10 p-3 shadow-sm", isDefault ? "bg-white dark:bg-card" : "bg-surface-input")}>
<div className={cn("space-y-2 rounded-xl border border-border/70 p-3 shadow-sm", isDefault ? "bg-background" : "bg-surface-input")}>
{fallbackOptions.map((candidate) => (
<label key={candidate.account.id} className="flex items-center gap-3 text-meta cursor-pointer group/label">
<input
type="checkbox"
checked={fallbackProviderIds.includes(candidate.account.id)}
onChange={() => toggleFallbackProvider(candidate.account.id)}
className="rounded border-black/20 dark:border-white/20 text-blue-500 focus:ring-blue-500/50"
className="rounded border-border/80 text-brand focus:ring-brand/35"
/>
<span className="font-medium group-hover/label:text-blue-500 transition-colors">{candidate.account.label}</span>
<span className="font-medium group-hover/label:text-brand transition-colors">{candidate.account.label}</span>
<span className="text-xs text-muted-foreground">
{candidate.account.model || candidate.vendor?.name || candidate.account.vendorId}
</span>
@@ -894,7 +893,7 @@ function ProviderCard({
</p>
</div>
{hasConfiguredCredentials(account, status) ? (
<div className="flex items-center gap-1.5 text-tiny font-medium text-green-600 dark:text-green-500 bg-green-500/10 px-2 py-1 rounded-md">
<div className="flex items-center gap-1.5 text-tiny font-medium text-emerald-700 bg-green-500/10 px-2 py-1 rounded-md">
<div className="w-1.5 h-1.5 rounded-full bg-current" />
{t('aiProviders.card.configured')}
</div>
@@ -906,7 +905,7 @@ function ProviderCard({
href={typeInfo.apiKeyUrl}
target="_blank"
rel="noopener noreferrer"
className="text-meta text-blue-500 hover:text-blue-600 hover:underline flex items-center gap-1"
className="text-meta text-brand hover:text-brand-hover hover:underline flex items-center gap-1"
tabIndex={-1}
>
{t('aiProviders.oauth.getApiKey')} <ExternalLink className="h-3 w-3" />
@@ -941,10 +940,10 @@ function ProviderCard({
variant="outline"
onClick={handleSaveEdits}
className={cn(
"rounded-xl px-4 border-black/10 dark:border-white/10",
"rounded-xl px-4 border-border/70",
isDefault
? "h-[40px] bg-white dark:bg-card hover:bg-black/5 dark:hover:bg-white/10"
: "h-[44px] bg-surface-input hover:bg-black/5 dark:hover:bg-white/10 shadow-sm"
? "h-[40px] bg-background hover:bg-surface-tertiary"
: "h-[44px] bg-surface-input hover:bg-surface-tertiary shadow-sm"
)}
disabled={
validating
@@ -973,8 +972,8 @@ function ProviderCard({
className={cn(
"p-0 rounded-xl",
isDefault
? "h-[40px] w-[40px] hover:bg-black/5 dark:hover:bg-white/10"
: "h-[44px] w-[44px] bg-surface-input border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10 shadow-sm text-muted-foreground hover:text-foreground"
? "h-[40px] w-[40px] hover:bg-surface-tertiary"
: "h-[44px] w-[44px] bg-surface-input border border-border/70 hover:bg-surface-tertiary shadow-sm text-muted-foreground hover:text-foreground"
)}
>
<X className="h-4 w-4" />
@@ -1327,10 +1326,10 @@ function AddProviderDialog({
};
return (
<div data-testid="add-provider-dialog" className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
<div data-testid="add-provider-dialog" className="fixed inset-0 z-50 bg-foreground/15 flex items-center justify-center p-4">
<Card className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-surface-modal overflow-hidden">
<CardHeader className="relative pb-2 shrink-0">
<CardTitle className="text-2xl font-serif font-normal">{t('aiProviders.dialog.title')}</CardTitle>
<CardTitle className="text-2xl font-semibold">{t('aiProviders.dialog.title')}</CardTitle>
<CardDescription className="text-sm mt-1 text-foreground/70">
{t('aiProviders.dialog.desc')}
</CardDescription>
@@ -1338,7 +1337,7 @@ function AddProviderDialog({
data-testid="add-provider-close-button"
variant="ghost"
size="icon"
className="absolute right-4 top-4 rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="absolute right-4 top-4 rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-surface-subtle"
onClick={onClose}
>
<X className="h-4 w-4" />
@@ -1360,11 +1359,11 @@ function AddProviderDialog({
setShowAdvancedConfig(false);
setArkMode('apikey');
}}
className="p-4 rounded-2xl border border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-center group"
className="p-4 rounded-2xl border border-border/70 hover:bg-surface-subtle transition-colors text-center group"
>
<div className="h-12 w-12 mx-auto mb-3 flex items-center justify-center bg-black/5 dark:bg-white/5 rounded-xl shadow-sm border border-black/5 dark:border-white/5 group-hover:scale-105 transition-transform">
<div className="h-12 w-12 mx-auto mb-3 flex items-center justify-center bg-surface-subtle rounded-xl shadow-sm border border-border/70 group-hover:scale-105 transition-transform">
{getProviderIconUrl(type.id) ? (
<img src={getProviderIconUrl(type.id)} alt={type.name} className={cn('h-6 w-6', shouldInvertInDark(type.id) && 'dark:invert')} />
<img src={getProviderIconUrl(type.id)} alt={type.name} className="h-6 w-6" />
) : (
<span className="text-2xl">{type.icon}</span>
)}
@@ -1375,10 +1374,10 @@ function AddProviderDialog({
</div>
) : (
<div className="space-y-6">
<div className="flex items-center gap-3 p-4 rounded-2xl bg-white dark:bg-card border border-black/5 dark:border-white/5 shadow-sm">
<div className="h-10 w-10 shrink-0 flex items-center justify-center bg-black/5 dark:bg-white/5 rounded-xl">
<div className="flex items-center gap-3 p-4 rounded-2xl bg-background border border-border/70 shadow-sm">
<div className="h-10 w-10 shrink-0 flex items-center justify-center bg-surface-subtle rounded-xl">
{getProviderIconUrl(selectedType!) ? (
<img src={getProviderIconUrl(selectedType!)} alt={typeInfo?.name} className={cn('h-6 w-6', shouldInvertInDark(selectedType!) && 'dark:invert')} />
<img src={getProviderIconUrl(selectedType!)} alt={typeInfo?.name} className="h-6 w-6" />
) : (
<span className="text-xl">{typeInfo?.icon}</span>
)}
@@ -1395,7 +1394,7 @@ function AddProviderDialog({
setShowAdvancedConfig(false);
setArkMode('apikey');
}}
className="text-meta text-blue-500 hover:text-blue-600 font-medium"
className="text-meta text-brand hover:text-brand-hover font-medium"
>
{t('aiProviders.dialog.change')}
</button>
@@ -1406,7 +1405,7 @@ function AddProviderDialog({
href={effectiveDocsUrl}
target="_blank"
rel="noopener noreferrer"
className="text-meta text-blue-500 hover:text-blue-600 font-medium inline-flex items-center gap-1"
className="text-meta text-brand hover:text-brand-hover font-medium inline-flex items-center gap-1"
>
{t('aiProviders.dialog.customDoc')}
<ExternalLink className="h-3 w-3" />
@@ -1431,12 +1430,12 @@ function AddProviderDialog({
{/* Auth mode toggle for providers supporting both */}
{isOAuth && supportsApiKey && (
<div className="flex rounded-xl border border-black/10 dark:border-white/10 overflow-hidden text-meta font-medium shadow-sm bg-surface-input p-1 gap-1">
<div className="flex rounded-xl border border-border/70 overflow-hidden text-meta font-medium shadow-sm bg-surface-input p-1 gap-1">
<button
onClick={() => setAuthMode('oauth')}
className={cn(
'flex-1 py-2 px-3 rounded-lg transition-colors',
authMode === 'oauth' ? 'bg-black/5 dark:bg-white/10 text-foreground' : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5'
authMode === 'oauth' ? 'bg-surface-tertiary text-foreground' : 'text-muted-foreground hover:bg-surface-subtle'
)}
>
{t('aiProviders.oauth.loginMode')}
@@ -1445,7 +1444,7 @@ function AddProviderDialog({
onClick={() => setAuthMode('apikey')}
className={cn(
'flex-1 py-2 px-3 rounded-lg transition-colors',
authMode === 'apikey' ? 'bg-black/5 dark:bg-white/10 text-foreground' : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5'
authMode === 'apikey' ? 'bg-surface-tertiary text-foreground' : 'text-muted-foreground hover:bg-surface-subtle'
)}
>
{t('aiProviders.oauth.apikeyMode')}
@@ -1463,7 +1462,7 @@ function AddProviderDialog({
href={typeInfo.apiKeyUrl}
target="_blank"
rel="noopener noreferrer"
className="text-meta text-blue-500 hover:text-blue-600 font-medium flex items-center gap-1"
className="text-meta text-brand hover:text-brand-hover font-medium flex items-center gap-1"
tabIndex={-1}
>
{t('aiProviders.oauth.getApiKey')} <ExternalLink className="h-3 w-3" />
@@ -1539,7 +1538,7 @@ function AddProviderDialog({
href={typeInfo.codePlanDocsUrl}
target="_blank"
rel="noopener noreferrer"
className="text-meta text-blue-500 hover:text-blue-600 font-medium inline-flex items-center gap-1"
className="text-meta text-brand hover:text-brand-hover font-medium inline-flex items-center gap-1"
tabIndex={-1}
>
{t('aiProviders.dialog.codePlanDoc')}
@@ -1558,7 +1557,7 @@ function AddProviderDialog({
}
setValidationError(null);
}}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.authModes.apiKey')}
</button>
@@ -1570,7 +1569,7 @@ function AddProviderDialog({
setModelId(codePlanPreset.modelId);
setValidationError(null);
}}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.dialog.codePlanMode')}
</button>
@@ -1589,21 +1588,21 @@ function AddProviderDialog({
<button
type="button"
onClick={() => setApiProtocol('openai-completions')}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.protocols.openaiCompletions', 'OpenAI Completions')}
</button>
<button
type="button"
onClick={() => setApiProtocol('openai-responses')}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.protocols.openaiResponses', 'OpenAI Responses')}
</button>
<button
type="button"
onClick={() => setApiProtocol('anthropic-messages')}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-background border-border/80 shadow-sm font-medium" : "border-transparent bg-surface-subtle text-muted-foreground hover:bg-surface-tertiary")}
>
{t('aiProviders.protocols.anthropic', 'Anthropic')}
</button>
@@ -1615,7 +1614,7 @@ function AddProviderDialog({
<button
type="button"
onClick={() => setShowAdvancedConfig((value) => !value)}
className="flex items-center justify-between w-full text-sm font-bold text-foreground/80 hover:text-foreground transition-colors"
className="flex items-center justify-between w-full text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
>
<span>{t('aiProviders.dialog.advancedConfig')}</span>
<ChevronDown className={cn("h-4 w-4 transition-transform", showAdvancedConfig && "rotate-180")} />
@@ -1637,8 +1636,8 @@ function AddProviderDialog({
{/* Device OAuth Trigger — only shown when in OAuth mode */}
{useOAuthFlow && (
<div className="space-y-4 pt-2">
<div className="rounded-xl bg-blue-500/10 border border-blue-500/20 p-5 text-center">
<p className="text-meta font-medium text-blue-600 dark:text-blue-400 mb-4 block">
<div className="rounded-xl border border-brand/20 bg-brand-soft p-5 text-center">
<p className="text-meta mb-4 block font-medium text-brand">
{t('aiProviders.oauth.loginPrompt')}
</p>
<Button
@@ -1656,9 +1655,9 @@ function AddProviderDialog({
{/* OAuth Active State Modal / Inline View */}
{oauthFlowing && (
<div className="mt-4 p-5 border border-black/10 dark:border-white/10 rounded-2xl bg-white dark:bg-card shadow-sm relative overflow-hidden">
<div className="mt-4 p-5 border border-border/70 rounded-2xl bg-background shadow-sm relative overflow-hidden">
{/* Background pulse effect */}
<div className="absolute inset-0 bg-blue-500/5 animate-pulse" />
<div className="absolute inset-0 animate-pulse bg-brand/5" />
<div className="relative z-10 flex flex-col items-center justify-center text-center space-y-5">
{oauthError ? (
@@ -1672,14 +1671,14 @@ function AddProviderDialog({
</div>
) : !oauthData ? (
<div className="space-y-4 py-6">
<Loader2 className="h-10 w-10 animate-spin text-blue-500 mx-auto" />
<Loader2 className="h-10 w-10 animate-spin text-brand mx-auto" />
<p className="text-meta font-medium text-muted-foreground animate-pulse">{t('aiProviders.oauth.requestingCode')}</p>
</div>
) : oauthData.mode === 'manual' ? (
<div className="space-y-4 w-full">
<div className="space-y-2">
<h3 className="font-semibold text-base text-foreground">Complete OpenAI Login</h3>
<p className="text-meta text-muted-foreground text-left bg-black/5 dark:bg-white/5 p-4 rounded-xl">
<p className="text-meta text-muted-foreground text-left bg-surface-subtle p-4 rounded-xl">
{oauthData.message || 'Open the authorization page, complete login, then paste the callback URL or code below.'}
</p>
</div>
@@ -1716,21 +1715,21 @@ function AddProviderDialog({
<div className="space-y-5 w-full">
<div className="space-y-2">
<h3 className="font-semibold text-base text-foreground">{t('aiProviders.oauth.approveLogin')}</h3>
<div className="text-meta text-muted-foreground text-left mt-2 space-y-1.5 bg-black/5 dark:bg-white/5 p-4 rounded-xl">
<div className="text-meta text-muted-foreground text-left mt-2 space-y-1.5 bg-surface-subtle p-4 rounded-xl">
<p>1. {t('aiProviders.oauth.step1')}</p>
<p>2. {t('aiProviders.oauth.step2')}</p>
<p>3. {t('aiProviders.oauth.step3')}</p>
</div>
</div>
<div className="flex items-center justify-center gap-3 p-4 bg-surface-input border border-black/5 dark:border-white/5 rounded-xl shadow-inner">
<code className="text-3xl font-mono tracking-[0.2em] font-bold text-foreground">
<div className="flex items-center justify-center gap-3 p-4 bg-surface-input border border-border/70 rounded-xl shadow-inner">
<code className="text-3xl font-mono tracking-[0.2em] font-medium text-foreground">
{oauthData.userCode}
</code>
<Button
variant="ghost"
size="icon"
className="h-10 w-10 rounded-full hover:bg-black/5 dark:hover:bg-white/10"
className="h-10 w-10 rounded-full hover:bg-surface-tertiary"
onClick={() => {
navigator.clipboard.writeText(oauthData.userCode);
toast.success(t('aiProviders.oauth.codeCopied'));
@@ -1750,7 +1749,7 @@ function AddProviderDialog({
</Button>
<div className="flex items-center justify-center gap-2 text-meta font-medium text-muted-foreground pt-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<Loader2 className="h-4 w-4 animate-spin text-brand" />
<span>{t('aiProviders.oauth.waitingApproval')}</span>
</div>
@@ -1766,7 +1765,7 @@ function AddProviderDialog({
)}
</div>
<Separator className="bg-black/10 dark:bg-white/10" />
<Separator className="bg-foreground/10" />
<div className="flex justify-end gap-3">
<Button

4
src/components/settings/UpdateSettings.tsx
View File

@@ -153,7 +153,7 @@ export function UpdateSettings() {
<div className="flex items-center justify-between">
<div className="space-y-1">
<p className="text-sm font-medium">{t('updates.currentVersion')}</p>
<p className="text-2xl font-bold">v{currentVersion}</p>
<p className="text-2xl font-medium">v{currentVersion}</p>
</div>
{renderStatusIcon()}
</div>
@@ -202,7 +202,7 @@ export function UpdateSettings() {
{/* Error Details */}
{status === 'error' && error && (
<div className="rounded-lg bg-red-50 dark:bg-red-900/10 p-4 text-red-600 dark:text-red-400 text-sm">
<div className="rounded-lg bg-red-50 bg-red-500/10 p-4 text-red-600 text-red-700 text-sm">
<p className="font-medium mb-1">{t('updates.errorDetails')}</p>
<p>{error}</p>
</div>