MCP live start/stop: Fix up the UX

vdavid · vdavid · commit f4c107aa1b19 · 2026-03-12T15:23:23.000+01:00
- Add `get_mcp_running` Tauri command to expose actual server state as ground truth
- `McpServerSection` now queries backend state via `syncState()` after every operation, keeping the toggle in sync with reality
- Serialize all MCP operations through a promise queue so rapid toggling can't cause inconsistent state
- Auto-check port availability on port change when server is off; when server is on, the restart result is the check
- Show "Server is running on port {port}" (green) when active, with the confirmed bound port, not the live setting
- Show yellow warning "Server turned off because port {port} is blocked" when a port change kills the server
- Port controls always enabled (no longer disabled when server is off)
- Unified all status messages (error, warning, running, port check) into a single slot below both settings — visible whenever either setting matches the search
- Ignore setting-change echoes from `syncState` by comparing incoming value to `serverRunning` instead of a skip-counter (fixes cross-window double-fire wiping the warning)
diff --git a/apps/desktop/src-tauri/src/commands/mcp.rs b/apps/desktop/src-tauri/src/commands/mcp.rs
@@ -29,3 +29,9 @@ pub async fn set_mcp_port<R: Runtime + 'static>(app: AppHandle<R>, port: u16) ->
     let config = mcp::McpConfig::from_settings_and_env(Some(true), Some(port));
     mcp::start_mcp_server(app, config).await
 }
+
+/// Returns whether the MCP server is currently running.
+#[tauri::command]
+pub fn get_mcp_running() -> bool {
+    mcp::is_mcp_running()
+}
diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
@@ -836,6 +836,7 @@ pub fn run() {
             // MCP server live control
             commands::mcp::set_mcp_enabled,
             commands::mcp::set_mcp_port,
+            commands::mcp::get_mcp_running,
             // Settings commands
             commands::settings::check_port_available,
             commands::settings::find_available_port,
diff --git a/apps/desktop/src/lib/settings/sections/McpServerSection.svelte b/apps/desktop/src/lib/settings/sections/McpServerSection.svelte
@@ -5,7 +5,13 @@
     import SettingNumberInput from '../components/SettingNumberInput.svelte'
     import Button from '$lib/ui/Button.svelte'
     import { getSetting, getSettingDefinition, setSetting, onSpecificSettingChange } from '$lib/settings'
-    import { checkPortAvailable, findAvailablePort, setMcpEnabled, setMcpPort } from '$lib/tauri-commands'
+    import {
+        checkPortAvailable,
+        findAvailablePort,
+        setMcpEnabled,
+        setMcpPort,
+        getMcpRunning,
+    } from '$lib/tauri-commands'
     import { createShouldShow } from '$lib/settings/settings-search'
     import { getAppLogger } from '$lib/logging/logger'
     import { onMount } from 'svelte'
@@ -23,24 +29,49 @@
     const mcpEnabledDef = getSettingDefinition('developer.mcpEnabled') ?? defaultDef
     const mcpPortDef = getSettingDefinition('developer.mcpPort') ?? defaultDef
 
-    const mcpEnabled = $derived(getSetting('developer.mcpEnabled'))
+    let serverRunning = $state(false)
+    /** The port the running server is actually bound to (may differ from the setting during changes) */
+    let runningPort = $state<number | null>(null)
     let serverError = $state<string | null>(null)
+    /** Warning shown when the server was stopped due to a port change failure */
+    let serverWarning = $state<string | null>(null)
     let portStatus = $state<'checking' | 'available' | 'unavailable' | null>(null)
     let suggestedPort = $state<number | null>(null)
     let portDebounceTimer: ReturnType<typeof setTimeout> | undefined
-    // Skip exactly one change notification caused by our own revert on failure
-    let skipNextEnabledChange = false
+
+    // Serialize all MCP operations so rapid toggling can't cause inconsistent state
+    let operationQueue = Promise.resolve()
+
+    function enqueue(fn: () => Promise<void>): void {
+        operationQueue = operationQueue.then(fn, fn)
+    }
+
+    /** Sync toggle + serverRunning from actual backend state */
+    async function syncState(): Promise<void> {
+        const running = await getMcpRunning()
+        serverRunning = running
+        if (running) {
+            runningPort = getSetting('developer.mcpPort')
+        } else {
+            runningPort = null
+        }
+        const settingEnabled = getSetting('developer.mcpEnabled')
+        if (settingEnabled !== running) {
+            setSetting('developer.mcpEnabled', running)
+        }
+    }
 
     onMount(() => {
+        void syncState()
+
         const unsubEnabled = onSpecificSettingChange('developer.mcpEnabled', (_id, value) => {
-            if (skipNextEnabledChange) {
-                skipNextEnabledChange = false
-                return
-            }
-            void applyMcpEnabled(value)
+            // Ignore echoes from our own syncState calls (sync + cross-window).
+            // A real user toggle always changes the value away from the current server state.
+            if ((value as boolean) === serverRunning) return
+            enqueue(() => applyMcpEnabled(value as boolean))
         })
-        const unsubPort = onSpecificSettingChange('developer.mcpPort', (_id, value) => {
-            debounceMcpPortChange(value)
+        const unsubPort = onSpecificSettingChange('developer.mcpPort', (_id, _value) => {
+            debounceMcpPortChange()
         })
         return () => {
             unsubEnabled()
@@ -51,59 +82,83 @@
 
     async function applyMcpEnabled(enabled: boolean): Promise<void> {
         serverError = null
+        serverWarning = null
+        portStatus = null
+        suggestedPort = null
         const port = getSetting('developer.mcpPort')
         try {
             await setMcpEnabled(enabled, port)
         } catch (error: unknown) {
             const message = error instanceof Error ? error.message : String(error)
             log.error('Failed to toggle MCP server: {error}', { error: message })
             serverError = message
-            // Revert the toggle so it reflects reality
-            skipNextEnabledChange = true
-            setSetting('developer.mcpEnabled', !enabled)
         }
+        await syncState()
     }
 
-    function debounceMcpPortChange(port: number): void {
+    function debounceMcpPortChange(): void {
+        // While debouncing, clear stale status so "Server is running on port X" doesn't show the old port
+        portStatus = null
+        suggestedPort = null
         clearTimeout(portDebounceTimer)
         portDebounceTimer = setTimeout(() => {
-            void applyMcpPort(port)
+            enqueue(() => applyMcpPort())
         }, 800)
     }
 
-    async function applyMcpPort(port: number): Promise<void> {
+    async function applyMcpPort(): Promise<void> {
+        const port = getSetting('developer.mcpPort')
         serverError = null
-        try {
-            await setMcpPort(port)
-        } catch (error: unknown) {
-            const message = error instanceof Error ? error.message : String(error)
-            log.error('Failed to change MCP port: {error}', { error: message })
-            serverError = message
+        serverWarning = null
+        portStatus = null
+        suggestedPort = null
+
+        // Check actual backend state, not the possibly-stale local flag
+        const wasRunning = await getMcpRunning()
+
+        if (wasRunning) {
+            // Server is running — restart on the new port
+            try {
+                await setMcpPort(port)
+            } catch (error: unknown) {
+                const message = error instanceof Error ? error.message : String(error)
+                log.error('Failed to change MCP port: {error}', { error: message })
+                serverError = message
+            }
+            await syncState()
+            // If the server was stopped because the new port failed, show a warning instead of the raw error
+            if (!serverRunning) {
+                serverError = null
+                serverWarning = `Server turned off because port ${String(port)} is blocked`
+            }
+            return
         }
+
+        // Server is off — just check availability
+        await checkPort()
     }
 
-    async function checkPort() {
+    async function checkPort(): Promise<void> {
         const port = getSetting('developer.mcpPort')
         portStatus = 'checking'
+        suggestedPort = null
 
         try {
             const available = await checkPortAvailable(port)
             portStatus = available ? 'available' : 'unavailable'
 
             if (!available) {
                 suggestedPort = await findAvailablePort(port)
-            } else {
-                suggestedPort = null
             }
         } catch {
             portStatus = null
         }
     }
 
-    function useSuggestedPort() {
+    function useSuggestedPort(): void {
         if (suggestedPort) {
             setSetting('developer.mcpPort', suggestedPort)
-            portStatus = 'available'
+            portStatus = null
             suggestedPort = null
         }
     }
@@ -121,32 +176,35 @@
         </SettingRow>
     {/if}
 
-    {#if serverError}
-        <div class="server-error">{serverError}</div>
-    {/if}
-
     {#if shouldShow('developer.mcpPort')}
         <SettingRow
             id="developer.mcpPort"
             label={mcpPortDef.label}
             description={mcpPortDef.description}
-            disabled={!mcpEnabled}
             split
             {searchQuery}
         >
             <div class="port-setting">
-                <SettingNumberInput id="developer.mcpPort" disabled={!mcpEnabled} />
-                <Button variant="secondary" size="mini" onclick={checkPort} disabled={!mcpEnabled}>Check port</Button>
+                <SettingNumberInput id="developer.mcpPort" />
+                <Button variant="secondary" size="mini" onclick={checkPort}>Check port</Button>
             </div>
         </SettingRow>
+    {/if}
 
-        {#if portStatus === 'checking'}
+    {#if shouldShow('developer.mcpEnabled') || shouldShow('developer.mcpPort')}
+        {#if serverError}
+            <div class="port-status unavailable">{serverError}</div>
+        {:else if serverWarning}
+            <div class="port-status warning">{serverWarning}</div>
+        {:else if serverRunning && runningPort}
+            <div class="port-status active">Server is running on port {runningPort}</div>
+        {:else if portStatus === 'checking'}
             <div class="port-status checking">Checking port availability...</div>
         {:else if portStatus === 'available'}
-            <div class="port-status available">Port is available</div>
+            <div class="port-status available">Port {getSetting('developer.mcpPort')} is available</div>
         {:else if portStatus === 'unavailable'}
             <div class="port-status unavailable">
-                Port is in use
+                Port {getSetting('developer.mcpPort')} is in use
                 {#if suggestedPort}
                     <Button variant="primary" size="mini" onclick={useSuggestedPort}>
                         Use port {suggestedPort} instead
@@ -176,24 +234,22 @@
         color: var(--color-text-tertiary);
     }
 
-    .port-status.available {
+    .port-status.available,
+    .port-status.active {
         background: color-mix(in srgb, var(--color-allow) 10%, transparent);
         color: var(--color-allow);
     }
 
+    .port-status.warning {
+        background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+        color: var(--color-warning);
+    }
+
     .port-status.unavailable {
         background: color-mix(in srgb, var(--color-error) 10%, transparent);
         color: var(--color-error);
         display: flex;
         align-items: center;
         gap: var(--spacing-sm);
     }
-
-    .server-error {
-        padding: var(--spacing-xs) var(--spacing-sm);
-        border-radius: var(--radius-sm);
-        font-size: var(--font-size-sm);
-        background: color-mix(in srgb, var(--color-error) 10%, transparent);
-        color: var(--color-error);
-    }
 </style>
diff --git a/apps/desktop/src/lib/tauri-commands/index.ts b/apps/desktop/src/lib/tauri-commands/index.ts
@@ -253,6 +253,7 @@ export {
     findAvailablePort,
     setMcpEnabled,
     setMcpPort,
+    getMcpRunning,
     updateFileWatcherDebounce,
     updateServiceResolveTimeout,
     setIndexingEnabled,
diff --git a/apps/desktop/src/lib/tauri-commands/settings.ts b/apps/desktop/src/lib/tauri-commands/settings.ts
@@ -57,6 +57,11 @@ export async function setMcpPort(port: number): Promise<void> {
     await invoke('set_mcp_port', { port })
 }
 
+/** Returns whether the MCP server is currently running. */
+export async function getMcpRunning(): Promise<boolean> {
+    return invoke<boolean>('get_mcp_running')
+}
+
 // ============================================================================
 // Indexing commands
 // ============================================================================
