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

+ {/* Proxy Status Widget - Quick access to start/stop controls */} + {!isRemoteMode && ( +
+

Instance Status

+ +
+ )} + {/* Mode Toggle - Card based selection */}

Connection Mode

@@ -307,16 +318,25 @@ export default function ProxySection() { Backend Binary + {/* Warning when proxy is running - must stop to change backend */} + {isProxyRunning && ( + + + + Stop the running proxy above to switch backend binary. + + + )}
{/* Plus Backend Card */}