fix(ui): allow backend switching in remote mode

When in Remote mode, local proxy running status no longer blocks
backend switching. Introduced `isBackendSwitchBlocked` computed
variable that only evaluates true in Local mode with running proxy.

Closes #463
This commit is contained in:
kaitranntt
2026-02-04 21:36:20 -05:00
parent 4c5030dd62
commit 28e776d58e
@@ -155,6 +155,8 @@ export default function ProxySection() {
} }
const isRemoteMode = config.remote.enabled ?? false; const isRemoteMode = config.remote.enabled ?? false;
// Only block backend switching in local mode when proxy is running
const isBackendSwitchBlocked = !isRemoteMode && isProxyRunning;
const remoteConfig = config.remote; const remoteConfig = config.remote;
const fallbackConfig = config.fallback; const fallbackConfig = config.fallback;
@@ -318,8 +320,8 @@ export default function ProxySection() {
<Box className="w-4 h-4" /> <Box className="w-4 h-4" />
Backend Binary Backend Binary
</h3> </h3>
{/* Warning when proxy is running - must stop to change backend */} {/* Warning when local proxy is running - must stop to change backend (not applicable in remote mode) */}
{isProxyRunning && ( {!isRemoteMode && isProxyRunning && (
<Alert className="py-2 border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-900/20 [&>svg]:top-2.5"> <Alert className="py-2 border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-900/20 [&>svg]:top-2.5">
<AlertTriangle className="h-4 w-4 text-amber-600" /> <AlertTriangle className="h-4 w-4 text-amber-600" />
<AlertDescription className="text-amber-700 dark:text-amber-400"> <AlertDescription className="text-amber-700 dark:text-amber-400">
@@ -331,12 +333,12 @@ export default function ProxySection() {
{/* Plus Backend Card */} {/* Plus Backend Card */}
<button <button
onClick={() => handleBackendChange('plus')} onClick={() => handleBackendChange('plus')}
disabled={updateBackendMutation.isPending || isProxyRunning} disabled={updateBackendMutation.isPending || isBackendSwitchBlocked}
className={`p-4 rounded-lg border-2 text-left transition-all ${ className={`p-4 rounded-lg border-2 text-left transition-all ${
backend === 'plus' backend === 'plus'
? 'border-primary bg-primary/5' ? 'border-primary bg-primary/5'
: 'border-border hover:border-muted-foreground/50' : 'border-border hover:border-muted-foreground/50'
} ${isProxyRunning ? 'opacity-60 cursor-not-allowed' : ''}`} } ${isBackendSwitchBlocked ? 'opacity-60 cursor-not-allowed' : ''}`}
> >
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<span className="font-medium">CLIProxyAPIPlus</span> <span className="font-medium">CLIProxyAPIPlus</span>
@@ -352,12 +354,12 @@ export default function ProxySection() {
{/* Original Backend Card */} {/* Original Backend Card */}
<button <button
onClick={() => handleBackendChange('original')} onClick={() => handleBackendChange('original')}
disabled={updateBackendMutation.isPending || isProxyRunning} disabled={updateBackendMutation.isPending || isBackendSwitchBlocked}
className={`p-4 rounded-lg border-2 text-left transition-all ${ className={`p-4 rounded-lg border-2 text-left transition-all ${
backend === 'original' backend === 'original'
? 'border-primary bg-primary/5' ? 'border-primary bg-primary/5'
: 'border-border hover:border-muted-foreground/50' : 'border-border hover:border-muted-foreground/50'
} ${isProxyRunning ? 'opacity-60 cursor-not-allowed' : ''}`} } ${isBackendSwitchBlocked ? 'opacity-60 cursor-not-allowed' : ''}`}
> >
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<span className="font-medium">CLIProxyAPI</span> <span className="font-medium">CLIProxyAPI</span>