From 64581734c61f3ad31e52c3decc6de10a6f983050 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Fri, 23 Jan 2026 13:53:53 -0500
Subject: [PATCH] fix(ui): integrate ProxyStatusWidget in Settings & block
 backend switch when running

- Add ProxyStatusWidget to Settings/Proxy page for quick start/stop access
- Disable backend selection when proxy is running with clear warning
- Removes UX friction: no need to navigate to CLIProxy page to stop instance
- Shows amber alert explaining why backend switch is blocked

User can now:
1. See proxy status directly in Settings
2. Stop proxy from Settings page
3. Change backend only when proxy is stopped
---
 .../pages/settings/sections/proxy/index.tsx   | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/settings/sections/proxy/index.tsx b/ui/src/pages/settings/sections/proxy/index.tsx
index 4c1518f7..73388d35 100644
--- a/ui/src/pages/settings/sections/proxy/index.tsx
+++ b/ui/src/pages/settings/sections/proxy/index.tsx
@@ -19,9 +19,10 @@ import {
   AlertTriangle,
 } from 'lucide-react';
 import { useProxyConfig, useRawConfig } from '../../hooks';
-import { useUpdateBackend } from '@/hooks/use-cliproxy';
+import { useUpdateBackend, useProxyStatus } from '@/hooks/use-cliproxy';
 import { LocalProxyCard } from './local-proxy-card';
 import { RemoteProxyCard } from './remote-proxy-card';
+import { ProxyStatusWidget } from '@/components/monitoring/proxy-status-widget';
 import { api } from '@/lib/api-client';
 
 /** LocalStorage key for debug mode preference */
@@ -78,6 +79,8 @@ export default function ProxySection() {
   const [backend, setBackend] = useState<'original' | 'plus'>('plus');
   const [hasKiroGhcpVariants, setHasKiroGhcpVariants] = useState(false);
   const updateBackendMutation = useUpdateBackend();
+  const { data: proxyStatus } = useProxyStatus();
+  const isProxyRunning = proxyStatus?.running ?? false;
 
   // Fetch backend setting
   const fetchBackend = useCallback(async () => {
@@ -253,6 +256,14 @@ export default function ProxySection() {
             for proxy-based profiles
           </p>
 
+          {/* Proxy Status Widget - Quick access to start/stop controls */}
+          {!isRemoteMode && (
+            <div className="space-y-3">
+              <h3 className="text-base font-medium">Instance Status</h3>
+              <ProxyStatusWidget />
+            </div>
+          )}
+
           {/* Mode Toggle - Card based selection */}
           <div className="space-y-3">
             <h3 className="text-base font-medium">Connection Mode</h3>
@@ -307,16 +318,25 @@ export default function ProxySection() {
               <Box className="w-4 h-4" />
               Backend Binary
             </h3>
+            {/* Warning when proxy is running - must stop to change backend */}
+            {isProxyRunning && (
+              <Alert className="py-2 border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-900/20">
+                <AlertTriangle className="h-4 w-4 text-amber-600" />
+                <AlertDescription className="text-amber-700 dark:text-amber-400">
+                  Stop the running proxy above to switch backend binary.
+                </AlertDescription>
+              </Alert>
+            )}
             <div className="grid grid-cols-2 gap-3">
               {/* Plus Backend Card */}
               <button
                 onClick={() => handleBackendChange('plus')}
-                disabled={updateBackendMutation.isPending}
+                disabled={updateBackendMutation.isPending || isProxyRunning}
                 className={`p-4 rounded-lg border-2 text-left transition-all ${
                   backend === 'plus'
                     ? 'border-primary bg-primary/5'
                     : 'border-border hover:border-muted-foreground/50'
-                }`}
+                } ${isProxyRunning ? 'opacity-60 cursor-not-allowed' : ''}`}
               >
                 <div className="flex items-center gap-3 mb-2">
                   <span className="font-medium">CLIProxyAPIPlus</span>
@@ -332,12 +352,12 @@ export default function ProxySection() {
               {/* Original Backend Card */}
               <button
                 onClick={() => handleBackendChange('original')}
-                disabled={updateBackendMutation.isPending}
+                disabled={updateBackendMutation.isPending || isProxyRunning}
                 className={`p-4 rounded-lg border-2 text-left transition-all ${
                   backend === 'original'
                     ? 'border-primary bg-primary/5'
                     : 'border-border hover:border-muted-foreground/50'
-                }`}
+                } ${isProxyRunning ? 'opacity-60 cursor-not-allowed' : ''}`}
               >
                 <div className="flex items-center gap-3 mb-2">
                   <span className="font-medium">CLIProxyAPI</span>