feat: add click-to-toggle functionality for MCP servers in sidebar

packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/mcp.tsx

@@ -5,6 +5,7 @@ const id = "internal:sidebar-mcp"
 
 function View(props: { api: TuiPluginApi }) {
   const [open, setOpen] = createSignal(true)
+  const [loading, setLoading] = createSignal<string | null>(null)
   const theme = () => props.api.theme.current
   const list = createMemo(() => props.api.state.mcp())
   const on = createMemo(() => list().filter((item) => item.status === "connected").length)
@@ -25,6 +26,24 @@ function View(props: { api: TuiPluginApi }) {
     return theme().textMuted
   }
 
+  async function handleToggle(name: string) {
+    if (loading() !== null) return
+    setLoading(name)
+    try {
+      const item = list().find((m) => m.name === name)
+      if (item?.status === "connected") {
+        await props.api.client.mcp.disconnect({ name })
+      } else {
+        await props.api.client.mcp.connect({ name })
+      }
+      await props.api.refresh.mcp()
+    } catch {
+      // silently ignore toggle errors
+    } finally {
+      setLoading(null)
+    }
+  }
+
   return (
     <Show when={list().length > 0}>
       <box>
@@ -45,7 +64,7 @@ function View(props: { api: TuiPluginApi }) {
         <Show when={list().length <= 2 || open()}>
           <For each={list()}>
             {(item) => (
-              <box flexDirection="row" gap={1}>
+              <box flexDirection="row" gap={1} onMouseDown={() => handleToggle(item.name)}>
                 <text
                   flexShrink={0}
                   style={{
@@ -54,10 +73,13 @@ function View(props: { api: TuiPluginApi }) {
                 >
                   •
                 </text>
-                <text fg={theme().text} wrapMode="word">
+                <text fg={loading() === item.name ? theme().textMuted : theme().text} wrapMode="word">
                   {item.name}{" "}
                   <span style={{ fg: theme().textMuted }}>
                     <Switch fallback={item.status}>
+                      <Match when={loading() === item.name}>
+                        <i>Loading…</i>
+                      </Match>
                       <Match when={item.status === "connected"}>Connected</Match>
                       <Match when={item.status === "failed"}>
                         <i>{item.error}</i>

packages/opencode/src/cli/cmd/tui/plugin/api.tsx

@@ -18,6 +18,7 @@ import { DialogSelect, type DialogSelectOption as SelectOption } from "../ui/dia
 import { Prompt } from "../component/prompt"
 import { Slot as HostSlot } from "./slots"
 import type { useToast } from "../ui/toast"
+import { reconcile } from "solid-js/store"
 import { InstallationVersion } from "@/installation/version"
 
 type RouteEntry = {
@@ -332,6 +333,12 @@ export function createTuiApi(input: Input): TuiPluginApi {
       },
     },
     state: stateApi(input.sync),
+    refresh: {
+      async mcp() {
+        const status = await input.sdk.client.mcp.status()
+        if (status.data) input.sync.set("mcp", reconcile(status.data))
+      },
+    },
     get client() {
       return input.sdk.client
     },

packages/opencode/src/cli/cmd/tui/plugin/runtime.ts

@@ -538,6 +538,7 @@ function pluginApi(runtime: RuntimeState, plugin: PluginEntry, scope: PluginScop
     tuiConfig: api.tuiConfig,
     kv: api.kv,
     state: api.state,
+    refresh: api.refresh,
     theme,
     get client() {
       return api.client

packages/opencode/test/fixture/tui-plugin.ts

@@ -172,6 +172,9 @@ export function createTuiPluginApi(opts: Opts = {}): HostPluginApi {
         }
       },
     },
+    refresh: {
+      mcp: async () => {},
+    },
     renderer,
     slots: {
       register: () => "fixture-slot",

packages/plugin/src/tui.ts

@@ -477,6 +477,9 @@ export type TuiPluginApi = {
   readonly tuiConfig: Frozen<TuiConfigView>
   kv: TuiKV
   state: TuiState
+  refresh: {
+    mcp: () => Promise<void>
+  }
   theme: TuiTheme
   client: OpencodeClient
   event: TuiEventBus