fix: avoid synthetic connecting state for enabled servers (#196)

Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>
Co-authored-by: its-mash <maa.ashik00@gmail.com>

Author: muxammadreza

apps/desktop/src/features/servers/ServersPage.tsx

@@ -62,10 +62,10 @@ function mergeDefinitionsWithStates(
       (input: InputDefinition) => input.required && !inputValues[input.id]
     );
 
-    // Calculate initial connection_status based on enabled state
-    // Calculate initial connection_status based on enabled state
-    // Actual runtime status comes from ServerManager events via useServerManager hook
-    const connection_status = state?.enabled ? 'connecting' : 'disconnected';
+    // Runtime status is in-memory only and comes from ServerManager.
+    // Do not infer `connecting` from persisted `enabled`; custom/offline servers can
+    // otherwise stay stuck in a synthetic Connecting state forever.
+    const connection_status = 'disconnected';
 
     return {
       ...def,
@@ -95,11 +95,7 @@ function createOfflineServerViewModel(state: InstalledServerState): ServerViewMo
       const inputValues = state.input_values;
       const requiredInputs = definition.transport.metadata?.inputs?.filter((i) => i.required) || [];
       const missing_required_inputs = requiredInputs.some((input) => !inputValues[input.id]);
-      const connection_status = state.enabled
-        ? missing_required_inputs
-          ? 'error'
-          : 'connecting'
-        : 'disconnected';
+      const connection_status = 'disconnected';
 
       return {
         ...definition,
@@ -143,7 +139,7 @@ function createOfflineServerViewModel(state: InstalledServerState): ServerViewMo
     enabled: state.enabled,
     oauth_connected: state.oauth_connected,
     input_values: state.input_values,
-    connection_status: state.enabled ? 'connecting' : 'disconnected',
+    connection_status: 'disconnected',
     missing_required_inputs: false,
     last_error: null,
     created_at: state.created_at,
@@ -371,7 +367,8 @@ export function ServersPage() {
       }
 
       // Apply runtime statuses from ServerManager to fix initial connection_status
-      // (mergeDefinitionsWithStates hardcodes 'connecting' for enabled servers)
+      // (the view-model builders seed 'disconnected'; ServerManager owns the real
+      // runtime status, which arrives via events)
       const mapStatus = (s: ConnectionStatus): ServerViewModel['connection_status'] => {
         if (s === 'refreshing' || s === 'authenticating') return 'connecting';
         return s;
@@ -450,6 +447,7 @@ export function ServersPage() {
    * - 'running': Server is connected and running
    * - 'error': Server has an error
    * - 'connected_auto': Non-OAuth server that's connected (no action buttons needed)
+   * - 'disconnected': Server is enabled but has no active runtime connection
    */
   const getServerAction = (
     server: ServerViewModel
@@ -461,7 +459,8 @@ export function ServersPage() {
     | 'auth_required'
     | 'running'
     | 'error'
-    | 'connected_auto' => {
+    | 'connected_auto'
+    | 'disconnected' => {
     if (!server.enabled) {
       return 'enable';
     }
@@ -489,8 +488,7 @@ export function ServersPage() {
         case 'error':
           return 'error';
         case 'disconnected':
-          // Enabled but disconnected - try to connect
-          return server.auth?.type === 'oauth' ? 'auth_required' : 'connected_auto';
+          return server.auth?.type === 'oauth' ? 'auth_required' : 'disconnected';
       }
     }
 
@@ -515,8 +513,8 @@ export function ServersPage() {
       return 'auth_required';
     }
 
-    // Non-OAuth server that's enabled but not yet connected
-    return 'connected_auto';
+    // Enabled but no runtime connection exists yet. Let the user start/retry it.
+    return 'disconnected';
   };
 
   // Get display status for UI
@@ -544,6 +542,8 @@ export function ServersPage() {
         return 'Connected';
       case 'connected_auto':
         return 'Connected';
+      case 'disconnected':
+        return 'Disconnected';
       case 'error':
         return 'Error';
     }
@@ -1228,6 +1228,16 @@ export function ServersPage() {
                         </button>
                       )}
 
+                      {serverAction === 'disconnected' && gatewayRunning && (
+                        <button
+                          onClick={() => handleRetry(server)}
+                          disabled={retryLoading}
+                          className="rounded-lg bg-[rgb(var(--success))] px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[rgb(var(--success))]/80 disabled:opacity-50"
+                        >
+                          {retryLoading ? 'Connecting...' : 'Connect'}
+                        </button>
+                      )}
+
                       {serverAction === 'error' && gatewayRunning && (
                         <button
                           onClick={() => handleRetry(server)}
@@ -1242,9 +1252,13 @@ export function ServersPage() {
                         </button>
                       )}
 
-                      {/* Disable button - shown when enabled and connected/running */}
+                      {/* Disable button - shown when an enabled server is connected,
+                          running, or sitting disconnected (so it can still be turned off
+                          without first reconnecting) */}
                       {server.enabled &&
-                        (serverAction === 'running' || serverAction === 'connected_auto') && (
+                        (serverAction === 'running' ||
+                          serverAction === 'connected_auto' ||
+                          serverAction === 'disconnected') && (
                           <button
                             onClick={() => handleDisableClick(server)}
                             disabled={disableLoading}
@@ -1756,7 +1770,6 @@ export function ServersPage() {
                   </div>
                 </div>
               )}
-
             </div>
 
             {/* Pinned footer — always visible regardless of form length (#163) */}

apps/desktop/src/stores/registryStore.ts

@@ -363,8 +363,9 @@ function mergeServers(defs: ServerDefinition[], states: InstalledServerState[]):
       input.required && !inputValues[input.id]
     );
 
-    // Calculate initial connection_status based on enabled state
-    const connection_status = state?.enabled ? 'connecting' : 'disconnected';
+    // Runtime connection status is not persisted. Do not infer Connecting from
+    // the enabled flag; the ServerManager event/status stream owns that state.
+    const connection_status = 'disconnected';
 
     return {
       ...def,