feat(mcp): start configured servers asynchronously

Author: Hona

packages/app/src/components/dialog-select-mcp.tsx

@@ -11,6 +11,7 @@ import { pathKey } from "@/utils/path-key"
 
 const statusLabels = {
   connected: "mcp.status.connected",
+  connecting: "mcp.status.connecting",
   failed: "mcp.status.failed",
   needs_auth: "mcp.status.needs_auth",
   needs_client_registration: "mcp.status.needs_client_registration",
@@ -79,6 +80,7 @@ export const DialogSelectMcp: Component = () => {
             if (s?.status === "failed" || s?.status === "needs_client_registration") return s.error
           }
           const enabled = () => status() === "connected"
+          const connecting = () => status() === "connecting"
           return (
             <div class="w-full flex items-center justify-between gap-x-3">
               <div class="flex flex-col gap-0.5 min-w-0">
@@ -95,8 +97,9 @@ export const DialogSelectMcp: Component = () => {
               <div onClick={(e) => e.stopPropagation()}>
                 <Switch
                   checked={enabled()}
-                  disabled={toggle.isPending && toggle.variables === i.name}
+                  disabled={connecting() || (toggle.isPending && toggle.variables === i.name)}
                   onChange={() => {
+                    if (connecting()) return
                     if (toggle.isPending) return
                     toggle.mutate(i.name)
                   }}

packages/app/src/components/status-popover-body.tsx

@@ -321,22 +321,25 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                   {(name) => {
                     const status = () => mcpStatus(name)
                     const enabled = () => status() === "connected"
+                    const connecting = () => status() === "connecting"
                     return (
                       <button
                         type="button"
                         class="flex items-center gap-2 w-full min-h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
                         onClick={() => {
+                          if (connecting()) return
                           if (toggleMcp.isPending) return
                           toggleMcp.mutate(name)
                         }}
-                        disabled={toggleMcp.isPending && toggleMcp.variables === name}
+                        disabled={connecting() || (toggleMcp.isPending && toggleMcp.variables === name)}
                       >
                         <div
                           classList={{
                             "size-1.5 rounded-full shrink-0": true,
                             "bg-icon-success-base": status() === "connected",
                             "bg-icon-critical-base": status() === "failed",
                             "bg-border-weak-base": status() === "disabled",
+                            "bg-icon-warning-base animate-pulse": status() === "connecting",
                             "bg-icon-warning-base":
                               status() === "needs_auth" || status() === "needs_client_registration",
                           }}
@@ -354,8 +357,9 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                         <div onClick={(event) => event.stopPropagation()}>
                           <Switch
                             checked={enabled()}
-                            disabled={toggleMcp.isPending && toggleMcp.variables === name}
+                            disabled={connecting() || (toggleMcp.isPending && toggleMcp.variables === name)}
                             onChange={() => {
+                              if (connecting()) return
                               if (toggleMcp.isPending) return
                               toggleMcp.mutate(name)
                             }}

packages/app/src/context/global-sync.tsx

@@ -49,6 +49,8 @@ export const loadMcpQuery = (directory: string, sdk: OpencodeClient) =>
   queryOptions({
     queryKey: [directory, "mcp"] as const,
     queryFn: () => sdk.mcp.status().then((r) => r.data ?? {}),
+    refetchInterval: (query) =>
+      Object.values(query.state.data ?? {}).some((status) => status.status === "connecting") ? 1000 : false,
   })
 
 export const loadLspQuery = (directory: string, sdk: OpencodeClient) =>

packages/app/src/context/global-sync/event-reducer.ts

@@ -2,6 +2,7 @@ import { Binary } from "@opencode-ai/core/util/binary"
 import { produce, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
 import type {
   Message,
+  McpStatus,
   Part,
   PermissionRequest,
   Project,
@@ -182,6 +183,11 @@ export function applyDirectoryEvent(input: {
       input.setStore("session_status", props.sessionID, reconcile(props.status))
       break
     }
+    case "mcp.status.changed": {
+      const props = event.properties as { name: string; status: McpStatus }
+      input.setStore("mcp", props.name, reconcile(props.status))
+      break
+    }
     case "message.updated": {
       const info = clean((event.properties as { info: Message }).info)
       const messages = input.store.message[info.sessionID]

packages/app/src/i18n/en.ts

@@ -303,6 +303,7 @@ export const dict = {
   "dialog.plugins.empty": "Plugins configured in opencode.json",
 
   "mcp.status.connected": "connected",
+  "mcp.status.connecting": "connecting",
   "mcp.status.failed": "failed",
   "mcp.status.needs_auth": "needs auth",
   "mcp.status.disabled": "disabled",

packages/opencode/src/cli/cmd/mcp.ts

@@ -143,6 +143,9 @@ export const McpListCommand = effectCmd({
       } else if (status.status === "disabled") {
         statusIcon = "○"
         statusText = "disabled"
+      } else if (status.status === "connecting") {
+        statusIcon = "…"
+        statusText = "connecting"
       } else if (status.status === "needs_auth") {
         statusIcon = "⚠"
         statusText = "needs authentication"

packages/opencode/src/cli/cmd/tui/context/sync.tsx

@@ -363,6 +363,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           break
         }
 
+        case "mcp.status.changed": {
+          if (workspace === project.workspace.current()) {
+            setStore("mcp", event.properties.name, reconcile(event.properties.status))
+          }
+          break
+        }
+
         case "vcs.branch.updated": {
           if (workspace === project.workspace.current()) {
             setStore("vcs", { branch: event.properties.branch })

packages/opencode/src/config/mcp.ts

@@ -13,7 +13,7 @@ export const Local = Schema.Struct({
     description: "Enable or disable the MCP server on startup",
   }),
   timeout: Schema.optional(PositiveInt).annotate({
-    description: "Timeout in ms for MCP server requests. Defaults to 5000 (5 seconds) if not specified.",
+    description: "Timeout in ms for MCP server requests. Defaults to 30000 (30 seconds) if not specified.",
   }),
 }).annotate({ identifier: "McpLocalConfig" })
 export type Local = Schema.Schema.Type<typeof Local>
@@ -49,7 +49,7 @@ export const Remote = Schema.Struct({
     description: "OAuth authentication configuration for the MCP server. Set to false to disable OAuth auto-detection.",
   }),
   timeout: Schema.optional(PositiveInt).annotate({
-    description: "Timeout in ms for MCP server requests. Defaults to 5000 (5 seconds) if not specified.",
+    description: "Timeout in ms for MCP server requests. Defaults to 30000 (30 seconds) if not specified.",
   }),
 }).annotate({ identifier: "McpRemoteConfig" })
 export type Remote = Schema.Schema.Type<typeof Remote>