From 21029f44c7eb76ecef5322680f22fbdade465cb9 Mon Sep 17 00:00:00 2001
From: Acbox <acbox0328@gmail.com>
Date: Sat, 28 Feb 2026 22:48:51 +0800
Subject: [PATCH] feat(web): improve MCP details page

---
 .../src/components/key-value-editor/index.vue |   88 +
 packages/web/src/i18n/locales/en.json         |    6 +-
 packages/web/src/i18n/locales/zh.json         |    6 +-
 .../web/src/pages/bots/components/bot-mcp.vue | 1467 +++++++----------
 packages/web/src/pages/bots/detail.vue        |   10 +
 5 files changed, 704 insertions(+), 873 deletions(-)
 create mode 100644 packages/web/src/components/key-value-editor/index.vue

diff --git a/packages/web/src/components/key-value-editor/index.vue b/packages/web/src/components/key-value-editor/index.vue
new file mode 100644
index 00000000..467e8712
--- /dev/null
+++ b/packages/web/src/components/key-value-editor/index.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Button, Input } from '@memoh/ui'
+
+export interface KeyValuePair {
+  key: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: KeyValuePair[]
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  readonly?: boolean
+}>(), {
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value',
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: KeyValuePair[]]
+}>()
+
+function updateRow(index: number, field: 'key' | 'value', val: string) {
+  const list = [...props.modelValue]
+  list[index] = { ...list[index], [field]: val }
+  emit('update:modelValue', list)
+}
+
+function addRow() {
+  emit('update:modelValue', [...props.modelValue, { key: '', value: '' }])
+}
+
+function removeRow(index: number) {
+  const list = [...props.modelValue]
+  list.splice(index, 1)
+  emit('update:modelValue', list)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div
+      v-for="(pair, index) in modelValue"
+      :key="index"
+      class="flex items-center gap-2"
+    >
+      <Input
+        :model-value="pair.key"
+        :placeholder="keyPlaceholder"
+        :readonly="readonly"
+        class="flex-1 font-mono text-xs"
+        @update:model-value="(val) => updateRow(index, 'key', String(val))"
+      />
+      <Input
+        :model-value="pair.value"
+        :placeholder="valuePlaceholder"
+        :readonly="readonly"
+        class="flex-1 font-mono text-xs"
+        @update:model-value="(val) => updateRow(index, 'value', String(val))"
+      />
+      <Button
+        v-if="!readonly"
+        type="button"
+        variant="ghost"
+        size="icon"
+        class="shrink-0 size-8 text-muted-foreground hover:text-destructive"
+        @click="removeRow(index)"
+      >
+        <FontAwesomeIcon :icon="['fas', 'xmark']" />
+      </Button>
+    </div>
+    <Button
+      v-if="!readonly"
+      type="button"
+      variant="outline"
+      size="sm"
+      class="w-fit"
+      @click="addRow"
+    >
+      <FontAwesomeIcon
+        :icon="['fas', 'plus']"
+        class="mr-1.5"
+      />
+      {{ $t('common.add') }}
+    </Button>
+  </div>
+</template>
diff --git a/packages/web/src/i18n/locales/en.json b/packages/web/src/i18n/locales/en.json
index 2853a41e..335dc836 100644
--- a/packages/web/src/i18n/locales/en.json
+++ b/packages/web/src/i18n/locales/en.json
@@ -241,10 +241,13 @@
   "mcp": {
     "addTitle": "Add MCP",
     "addDescription": "Configure MCP server connection",
+    "searchPlaceholder": "Search MCP servers...",
+    "emptyTitle": "No MCP Servers",
+    "emptyDescription": "Add an MCP server to extend your bot's capabilities",
     "command": "Command",
     "commandPlaceholder": "Enter start command",
     "arguments": "Arguments",
-    "argumentsPlaceholder": "Enter arguments",
+    "argumentsPlaceholder": "Type and press Enter to add",
     "cwd": "Working Directory",
     "cwdPlaceholder": "Enter working directory path",
     "env": "Environment",
@@ -260,6 +263,7 @@
       "arguments": "Arguments",
       "env": "Environment"
     },
+    "draft": "Draft",
     "empty": "No MCP servers configured yet.",
     "deleteConfirm": "Are you sure you want to delete this MCP server?",
     "loadFailed": "Failed to load MCP servers",
diff --git a/packages/web/src/i18n/locales/zh.json b/packages/web/src/i18n/locales/zh.json
index 9c0052c0..281cbe05 100644
--- a/packages/web/src/i18n/locales/zh.json
+++ b/packages/web/src/i18n/locales/zh.json
@@ -237,10 +237,13 @@
   "mcp": {
     "addTitle": "添加 MCP",
     "addDescription": "配置 MCP 服务器连接",
+    "searchPlaceholder": "搜索 MCP 服务器...",
+    "emptyTitle": "暂无 MCP 服务器",
+    "emptyDescription": "添加 MCP 服务器以扩展 Bot 的能力",
     "command": "命令",
     "commandPlaceholder": "输入启动命令",
     "arguments": "参数",
-    "argumentsPlaceholder": "输入启动参数",
+    "argumentsPlaceholder": "输入后按 Enter 添加",
     "cwd": "工作目录",
     "cwdPlaceholder": "输入工作目录路径",
     "env": "环境变量",
@@ -256,6 +259,7 @@
       "arguments": "参数",
       "env": "环境变量"
     },
+    "draft": "草稿",
     "empty": "暂未配置 MCP 服务器。",
     "deleteConfirm": "确定要删除这个 MCP 服务器吗？",
     "loadFailed": "加载 MCP 服务器列表失败",
diff --git a/packages/web/src/pages/bots/components/bot-mcp.vue b/packages/web/src/pages/bots/components/bot-mcp.vue
index 8a6ef8e2..0c3cd9f0 100644
--- a/packages/web/src/pages/bots/components/bot-mcp.vue
+++ b/packages/web/src/pages/bots/components/bot-mcp.vue
@@ -1,555 +1,418 @@
 <template>
-  <div class="mx-auto space-y-5">
-    <div class="flex items-start justify-between gap-3">
-      <div class="space-y-1 min-w-0">
-        <h3 class="text-lg font-semibold">
-          {{ $t('mcp.addTitle') }}
-        </h3>
-        <p class="text-sm text-muted-foreground">
-          {{ $t('mcp.addDescription') }}
-        </p>
+  <MasterDetailSidebarLayout>
+    <template #sidebar-header>
+      <InputGroup class="shadow-none">
+        <InputGroupInput
+          v-model="searchText"
+          :placeholder="$t('mcp.searchPlaceholder')"
+          aria-label="Search MCP servers"
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            type="button"
+            size="icon-xs"
+            aria-label="Search"
+          >
+            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </template>
+
+    <template #sidebar-content>
+      <div
+        v-if="loading && items.length === 0"
+        class="flex items-center gap-2 text-sm text-muted-foreground p-4"
+      >
+        <Spinner />
+        <span>{{ $t('common.loading') }}</span>
       </div>
-      <div class="flex flex-wrap items-center gap-2 shrink-0 justify-end">
-        <template v-if="selectedIds.length === 0">
-          <Button
-            variant="outline"
-            size="sm"
-            :disabled="loading"
-            @click="loadList"
+      <SidebarMenu
+        v-for="item in filteredItems"
+        v-else
+        :key="item.id || '_draft'"
+      >
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            as-child
+            class="justify-start py-5! px-4"
           >
-            <Spinner
-              v-if="loading"
-              class="mr-1.5"
-            />
-            {{ $t('common.refresh') }}
-          </Button>
-          <Button
-            size="sm"
-            @click="openCreateDialog"
-          >
-            {{ $t('common.add') }}
-          </Button>
-        </template>
-        <template v-else>
-          <span class="text-sm text-muted-foreground mr-1">
-            {{ $t('common.batchSelected', { count: selectedIds.length }) }}
-          </span>
-          <Button
-            variant="ghost"
-            size="sm"
-            @click="clearSelection"
-          >
-            {{ $t('common.cancelSelection') }}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            @click="handleBatchExport"
-          >
-            {{ $t('common.export') }}
-          </Button>
-          <ConfirmPopover
-            :message="$t('common.batchDeleteConfirm', { count: selectedIds.length })"
-            @confirm="handleBatchDelete"
-          >
-            <template #trigger>
-              <Button
-                variant="destructive"
-                size="sm"
-              >
-                {{ $t('common.delete') }}
-              </Button>
-            </template>
-          </ConfirmPopover>
-        </template>
-      </div>
-    </div>
-
-    <!-- Loading -->
-    <div
-      v-if="loading && items.length === 0"
-      class="flex items-center gap-2 text-sm text-muted-foreground"
-    >
-      <Spinner />
-      <span>{{ $t('common.loading') }}</span>
-    </div>
-
-    <!-- Empty -->
-    <div
-      v-else-if="items.length === 0"
-      class="rounded-md border p-4"
-    >
-      <p class="text-sm text-muted-foreground">
-        {{ $t('mcp.empty') }}
-      </p>
-    </div>
-
-    <!-- Table -->
-    <DataTable
-      v-else
-      :columns="columns"
-      :data="items"
-    />
-
-    <!-- Add dialog: tabs (single | import). Edit dialog: two columns (form | json) with sync -->
-    <Dialog v-model:open="formDialogOpen">
-      <DialogContent :class="editingItem ? 'sm:max-w-4xl max-h-[90vh] flex flex-col w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] sm:w-auto' : 'sm:max-w-md w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] sm:w-auto'">
-        <DialogHeader>
-          <DialogTitle>{{ editingItem ? $t('common.edit') : $t('common.add') }} MCP Server</DialogTitle>
-        </DialogHeader>
-
-        <!-- Edit: two columns on desktop, stacked on mobile -->
-        <template v-if="editingItem">
-          <div class="mt-3 flex flex-col md:grid md:grid-cols-2 gap-4 flex-1 min-h-0 overflow-y-auto">
-            <form
-              class="flex flex-col gap-3 min-h-0 rounded-lg border border-border bg-card p-3 md:bg-transparent md:border-0 md:p-0 md:rounded-none md:overflow-y-auto md:pr-2"
-              @submit.prevent="handleSubmit"
+            <Toggle
+              :class="['py-4 border w-full text-left', selectedItem?.id === item.id ? 'border-border' : 'border-transparent']"
+              :model-value="selectedItem?.id === item.id"
+              @update:model-value="(v) => { if (v) selectItem(item) }"
             >
-              <div class="space-y-1.5">
-                <Label>{{ $t('common.name') }}</Label>
-                <Input
-                  v-model="formData.name"
-                  :placeholder="$t('common.namePlaceholder')"
-                  @update:model-value="syncFormToEditJson"
+              <div class="flex items-center gap-2 w-full min-w-0">
+                <span
+                  class="size-2 rounded-full shrink-0"
+                  :class="item.is_active ? 'bg-green-500' : 'bg-muted-foreground/40'"
                 />
+                <span class="truncate flex-1">
+                  {{ item.name }}
+                  <span
+                    v-if="!item.id"
+                    class="text-muted-foreground text-xs"
+                  >*</span>
+                </span>
+                <Badge
+                  v-if="item.id"
+                  variant="outline"
+                  class="shrink-0 text-[10px]"
+                >
+                  {{ item.type }}
+                </Badge>
+                <Badge
+                  v-else
+                  variant="secondary"
+                  class="shrink-0 text-[10px]"
+                >
+                  {{ $t('mcp.draft') }}
+                </Badge>
               </div>
-              <Tabs
-                v-model="connectionMode"
-                class="w-full"
+            </Toggle>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </template>
+
+    <template #sidebar-footer>
+      <div class="flex gap-2 p-2">
+        <Button
+          class="flex-1"
+          size="sm"
+          @click="openCreateDialog"
+        >
+          <FontAwesomeIcon
+            :icon="['fas', 'plus']"
+            class="mr-1.5"
+          />
+          {{ $t('common.add') }}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          @click="openImportDialog"
+        >
+          {{ $t('common.import') }}
+        </Button>
+      </div>
+    </template>
+
+    <template #detail>
+      <ScrollArea
+        v-if="selectedItem"
+        class="max-h-full h-full"
+      >
+        <div class="p-6 space-y-6">
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold">
+              {{ selectedItem.name }}
+            </h3>
+            <div class="flex items-center gap-2">
+              <Button
+                v-if="selectedItem.id"
+                variant="outline"
+                size="sm"
+                @click="handleExportSingle"
               >
-                <TabsList class="w-full">
-                  <TabsTrigger value="stdio">
-                    {{ $t('mcp.types.stdio') }}
-                  </TabsTrigger>
-                  <TabsTrigger value="remote">
-                    {{ $t('mcp.types.remote') }}
-                  </TabsTrigger>
-                </TabsList>
-                <TabsContent
-                  value="stdio"
-                  class="mt-3 flex flex-col gap-3"
-                >
-                  <div class="space-y-1.5">
-                    <Label>{{ $t('mcp.command') }}</Label>
-                    <Input
-                      v-model="formData.command"
-                      :placeholder="$t('mcp.commandPlaceholder')"
-                      @update:model-value="syncFormToEditJson"
-                    />
-                  </div>
-                  <div class="space-y-1.5">
-                    <Label>{{ $t('mcp.arguments') }}</Label>
-                    <TagsInput
-                      v-model="argsTags"
-                      :add-on-blur="true"
-                      :duplicate="true"
-                      @update:model-value="syncFormToEditJson"
-                    >
-                      <TagsInputItem
-                        v-for="item in argsTags"
-                        :key="item"
-                        :value="item"
-                      >
-                        <TagsInputItemText />
-                        <TagsInputItemDelete />
-                      </TagsInputItem>
-                      <TagsInputInput
-                        :placeholder="$t('mcp.argumentsPlaceholder')"
-                        class="w-full py-1"
-                      />
-                    </TagsInput>
-                  </div>
-                  <div class="space-y-1.5">
-                    <Label>{{ $t('mcp.env') }}</Label>
-                    <TagsInput
-                      :model-value="envTags.tagList.value"
-                      :add-on-blur="true"
-                      :convert-value="envTags.convertValue"
-                      @update:model-value="(tags) => { envTags.handleUpdate(tags.map(String)); syncFormToEditJson() }"
-                    >
-                      <TagsInputItem
-                        v-for="(value, index) in envTags.tagList.value"
-                        :key="index"
-                        :value="value"
-                      >
-                        <TagsInputItemText />
-                        <TagsInputItemDelete />
-                      </TagsInputItem>
-                      <TagsInputInput
-                        :placeholder="$t('mcp.envPlaceholder')"
-                        class="w-full py-1"
-                      />
-                    </TagsInput>
-                  </div>
-                  <div class="space-y-1.5">
-                    <Label>{{ $t('mcp.cwd') }}</Label>
-                    <Input
-                      v-model="formData.cwd"
-                      :placeholder="$t('mcp.cwdPlaceholder')"
-                      @update:model-value="syncFormToEditJson"
-                    />
-                  </div>
-                </TabsContent>
-                <TabsContent
-                  value="remote"
-                  class="mt-3 flex flex-col gap-3"
-                >
-                  <div class="space-y-1.5">
-                    <Label>URL</Label>
-                    <Input
-                      v-model="formData.url"
-                      placeholder="https://example.com/mcp"
-                      @update:model-value="syncFormToEditJson"
-                    />
-                  </div>
-                  <div class="space-y-1.5">
-                    <Label>Headers</Label>
-                    <TagsInput
-                      :model-value="headerTags.tagList.value"
-                      :add-on-blur="true"
-                      :convert-value="headerTags.convertValue"
-                      @update:model-value="(tags) => { headerTags.handleUpdate(tags.map(String)); syncFormToEditJson() }"
-                    >
-                      <TagsInputItem
-                        v-for="(value, index) in headerTags.tagList.value"
-                        :key="index"
-                        :value="value"
-                      >
-                        <TagsInputItemText />
-                        <TagsInputItemDelete />
-                      </TagsInputItem>
-                      <TagsInputInput
-                        placeholder="Key:Value"
-                        class="w-full py-1"
-                      />
-                    </TagsInput>
-                  </div>
-                  <div class="space-y-1.5">
-                    <Label>Transport</Label>
-                    <Select
-                      v-model="formData.transport"
-                      @update:model-value="syncFormToEditJson"
-                    >
-                      <SelectTrigger
-                        class="w-full"
-                        aria-label="Transport"
-                      >
-                        <SelectValue placeholder="http" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          <SelectItem value="http">
-                            HTTP (Streamable)
-                          </SelectItem>
-                          <SelectItem value="sse">
-                            SSE
-                          </SelectItem>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </TabsContent>
-              </Tabs>
-            </form>
-            <div class="flex flex-col min-h-0 rounded-lg border border-border bg-card p-3 md:bg-transparent md:border-0 md:p-0 md:rounded-none">
-              <Label class="text-sm mb-1">JSON</Label>
-              <Textarea
-                v-model="editJson"
-                class="font-mono text-xs flex-1 min-h-[180px] md:min-h-[200px]"
-                @update:model-value="syncEditJsonToForm"
-              />
+                {{ $t('common.export') }}
+              </Button>
+              <ConfirmPopover
+                :message="$t('mcp.deleteConfirm')"
+                @confirm="handleDelete(selectedItem!)"
+              >
+                <template #trigger>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                  >
+                    {{ $t('common.delete') }}
+                  </Button>
+                </template>
+              </ConfirmPopover>
             </div>
           </div>
-          <DialogFooter class="mt-4 shrink-0 flex-row flex-wrap items-center gap-2 sm:justify-between">
-            <div class="flex items-center gap-2">
-              <Label class="text-sm font-normal">{{ $t('mcp.active') }}</Label>
-              <Switch
-                :model-value="formData.active"
-                @update:model-value="(val) => (formData.active = !!val)"
+
+          <form
+            class="flex flex-col gap-4"
+            @submit.prevent="handleSubmit"
+          >
+            <div class="space-y-1.5">
+              <Label>{{ $t('common.name') }}</Label>
+              <Input
+                v-model="formData.name"
+                :placeholder="$t('common.namePlaceholder')"
               />
             </div>
-            <div class="flex gap-2">
-              <DialogClose as-child>
-                <Button variant="outline">
-                  {{ $t('common.cancel') }}
-                </Button>
-              </DialogClose>
+
+            <div class="space-y-1.5">
+              <Label>{{ $t('common.type') }}</Label>
+              <Select v-model="connectionType">
+                <SelectTrigger class="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="stdio">
+                      {{ $t('mcp.types.stdio') }}
+                    </SelectItem>
+                    <SelectItem value="remote">
+                      {{ $t('mcp.types.remote') }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <template v-if="connectionType === 'stdio'">
+              <div class="space-y-1.5">
+                <Label>{{ $t('mcp.command') }}</Label>
+                <Input
+                  v-model="formData.command"
+                  :placeholder="$t('mcp.commandPlaceholder')"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <Label>{{ $t('mcp.arguments') }}</Label>
+                <TagsInput
+                  v-model="argsTags"
+                  :add-on-blur="true"
+                  :duplicate="true"
+                >
+                  <TagsInputItem
+                    v-for="tag in argsTags"
+                    :key="tag"
+                    :value="tag"
+                  >
+                    <TagsInputItemText />
+                    <TagsInputItemDelete />
+                  </TagsInputItem>
+                  <TagsInputInput
+                    :placeholder="$t('mcp.argumentsPlaceholder')"
+                    class="w-full py-1"
+                  />
+                </TagsInput>
+              </div>
+              <div class="space-y-1.5">
+                <Label>{{ $t('mcp.env') }}</Label>
+                <KeyValueEditor
+                  v-model="envPairs"
+                  key-placeholder="KEY"
+                  value-placeholder="VALUE"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <Label>{{ $t('mcp.cwd') }}</Label>
+                <Input
+                  v-model="formData.cwd"
+                  :placeholder="$t('mcp.cwdPlaceholder')"
+                />
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="space-y-1.5">
+                <Label>URL</Label>
+                <Input
+                  v-model="formData.url"
+                  placeholder="https://example.com/mcp"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <Label>Headers</Label>
+                <KeyValueEditor
+                  v-model="headerPairs"
+                  key-placeholder="Header-Name"
+                  value-placeholder="Header-Value"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <Label>Transport</Label>
+                <Select v-model="formData.transport">
+                  <SelectTrigger class="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="http">
+                        HTTP (Streamable)
+                      </SelectItem>
+                      <SelectItem value="sse">
+                        SSE
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+            </template>
+
+            <div class="flex items-center justify-between pt-2 border-t">
+              <div class="flex items-center gap-2">
+                <Label class="text-sm font-normal">{{ $t('mcp.active') }}</Label>
+                <Switch
+                  :model-value="formData.active"
+                  @update:model-value="(val) => (formData.active = !!val)"
+                />
+              </div>
               <Button
-                :disabled="submitting || !formData.name.trim() || (connectionMode === 'stdio' ? !formData.command.trim() : !formData.url.trim())"
-                @click="handleSubmit"
+                type="submit"
+                :disabled="submitting || !formData.name.trim()"
               >
                 <Spinner
                   v-if="submitting"
                   class="mr-1.5"
                 />
-                {{ $t('common.confirm') }}
+                {{ $t('common.save') }}
               </Button>
             </div>
-          </DialogFooter>
-        </template>
-
-        <!-- Add: tabs single | import -->
-        <template v-else>
-          <Tabs
-            v-model="addDialogTab"
-            class="mt-4 w-full"
-          >
-            <TabsList class="w-full">
-              <TabsTrigger value="single">
-                {{ $t('common.tabAddSingle') }}
-              </TabsTrigger>
-              <TabsTrigger value="import">
-                {{ $t('common.tabImportJson') }}
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent
-              value="single"
-              class="mt-3"
-            >
-              <form
-                class="flex flex-col gap-3"
-                @submit.prevent="handleSubmit"
-              >
-                <div class="space-y-1.5">
-                  <Label>{{ $t('common.name') }}</Label>
-                  <Input
-                    v-model="formData.name"
-                    :placeholder="$t('common.namePlaceholder')"
-                  />
-                </div>
-                <Tabs
-                  v-model="connectionMode"
-                  class="w-full"
-                >
-                  <TabsList class="w-full">
-                    <TabsTrigger value="stdio">
-                      {{ $t('mcp.types.stdio') }}
-                    </TabsTrigger>
-                    <TabsTrigger value="remote">
-                      {{ $t('mcp.types.remote') }}
-                    </TabsTrigger>
-                  </TabsList>
-                  <TabsContent
-                    value="stdio"
-                    class="mt-3 flex flex-col gap-3"
-                  >
-                    <div class="space-y-1.5">
-                      <Label>{{ $t('mcp.command') }}</Label>
-                      <Input
-                        v-model="formData.command"
-                        :placeholder="$t('mcp.commandPlaceholder')"
-                      />
-                    </div>
-                    <div class="space-y-1.5">
-                      <Label>{{ $t('mcp.arguments') }}</Label>
-                      <TagsInput
-                        v-model="argsTags"
-                        :add-on-blur="true"
-                        :duplicate="true"
-                      >
-                        <TagsInputItem
-                          v-for="item in argsTags"
-                          :key="item"
-                          :value="item"
-                        >
-                          <TagsInputItemText />
-                          <TagsInputItemDelete />
-                        </TagsInputItem>
-                        <TagsInputInput
-                          :placeholder="$t('mcp.argumentsPlaceholder')"
-                          class="w-full py-1"
-                        />
-                      </TagsInput>
-                    </div>
-                    <div class="space-y-1.5">
-                      <Label>{{ $t('mcp.env') }}</Label>
-                      <TagsInput
-                        :model-value="envTags.tagList.value"
-                        :add-on-blur="true"
-                        :convert-value="envTags.convertValue"
-                        @update:model-value="(tags) => envTags.handleUpdate(tags.map(String))"
-                      >
-                        <TagsInputItem
-                          v-for="(value, index) in envTags.tagList.value"
-                          :key="index"
-                          :value="value"
-                        >
-                          <TagsInputItemText />
-                          <TagsInputItemDelete />
-                        </TagsInputItem>
-                        <TagsInputInput
-                          :placeholder="$t('mcp.envPlaceholder')"
-                          class="w-full py-1"
-                        />
-                      </TagsInput>
-                    </div>
-                    <div class="space-y-1.5">
-                      <Label>{{ $t('mcp.cwd') }}</Label>
-                      <Input
-                        v-model="formData.cwd"
-                        :placeholder="$t('mcp.cwdPlaceholder')"
-                      />
-                    </div>
-                  </TabsContent>
-                  <TabsContent
-                    value="remote"
-                    class="mt-3 flex flex-col gap-3"
-                  >
-                    <div class="space-y-1.5">
-                      <Label>URL</Label>
-                      <Input
-                        v-model="formData.url"
-                        placeholder="https://example.com/mcp"
-                      />
-                    </div>
-                    <div class="space-y-1.5">
-                      <Label>Headers</Label>
-                      <TagsInput
-                        :model-value="headerTags.tagList.value"
-                        :add-on-blur="true"
-                        :convert-value="headerTags.convertValue"
-                        @update:model-value="(tags) => headerTags.handleUpdate(tags.map(String))"
-                      >
-                        <TagsInputItem
-                          v-for="(value, index) in headerTags.tagList.value"
-                          :key="index"
-                          :value="value"
-                        >
-                          <TagsInputItemText />
-                          <TagsInputItemDelete />
-                        </TagsInputItem>
-                        <TagsInputInput
-                          placeholder="Key:Value"
-                          class="w-full py-1"
-                        />
-                      </TagsInput>
-                    </div>
-                    <div class="space-y-1.5">
-                      <Label>Transport</Label>
-                      <Select v-model="formData.transport">
-                        <SelectTrigger
-                          class="w-full"
-                          aria-label="Transport"
-                        >
-                          <SelectValue placeholder="http" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem value="http">
-                              HTTP (Streamable)
-                            </SelectItem>
-                            <SelectItem value="sse">
-                              SSE
-                            </SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </TabsContent>
-                </Tabs>
-                <DialogFooter class="mt-4 flex-row flex-wrap items-center gap-2 sm:justify-between">
-                  <div class="flex items-center gap-2">
-                    <Label class="text-sm font-normal">{{ $t('mcp.active') }}</Label>
-                    <Switch
-                      :model-value="formData.active"
-                      @update:model-value="(val) => (formData.active = !!val)"
-                    />
-                  </div>
-                  <div class="flex gap-2">
-                    <DialogClose as-child>
-                      <Button variant="outline">
-                        {{ $t('common.cancel') }}
-                      </Button>
-                    </DialogClose>
-                    <Button
-                      type="submit"
-                      :disabled="submitting || !formData.name.trim() || (connectionMode === 'stdio' ? !formData.command.trim() : !formData.url.trim())"
-                    >
-                      <Spinner
-                        v-if="submitting"
-                        class="mr-1.5"
-                      />
-                      {{ $t('common.confirm') }}
-                    </Button>
-                  </div>
-                </DialogFooter>
-              </form>
-            </TabsContent>
-
-            <TabsContent
-              value="import"
-              class="mt-3 space-y-3"
-            >
-              <p class="text-sm text-muted-foreground">
-                {{ $t('mcp.importHint') }}
-              </p>
-              <Textarea
-                v-model="importJson"
-                rows="10"
-                class="font-mono text-xs"
-                :placeholder="importJsonPlaceholder"
-              />
-              <DialogFooter class="mt-4">
-                <DialogClose as-child>
-                  <Button variant="outline">
-                    {{ $t('common.cancel') }}
-                  </Button>
-                </DialogClose>
-                <Button
-                  :disabled="importSubmitting || !importJson.trim()"
-                  @click="handleImport"
-                >
-                  <Spinner
-                    v-if="importSubmitting"
-                    class="mr-1.5"
-                  />
-                  {{ $t('common.import') }}
-                </Button>
-              </DialogFooter>
-            </TabsContent>
-          </Tabs>
-        </template>
-      </DialogContent>
-    </Dialog>
-
-    <!-- Export dialog -->
-    <Dialog v-model:open="exportDialogOpen">
-      <DialogContent class="sm:max-w-lg w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] sm:w-auto">
-        <DialogHeader>
-          <DialogTitle>{{ $t('common.export') }} mcpServers</DialogTitle>
-        </DialogHeader>
-        <div class="mt-4">
-          <Textarea
-            :model-value="exportJson"
-            rows="10"
-            class="font-mono text-xs"
-            readonly
-          />
+          </form>
         </div>
-        <DialogFooter class="mt-4">
+      </ScrollArea>
+
+      <Empty
+        v-else
+        class="h-full flex justify-center items-center"
+      >
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <FontAwesomeIcon :icon="['fas', 'plug']" />
+          </EmptyMedia>
+        </EmptyHeader>
+        <EmptyTitle>{{ $t('mcp.emptyTitle') }}</EmptyTitle>
+        <EmptyDescription>{{ $t('mcp.emptyDescription') }}</EmptyDescription>
+        <EmptyContent>
           <Button
             variant="outline"
-            @click="handleCopyExport"
+            @click="openCreateDialog"
           >
-            {{ $t('common.copy') }}
+            {{ $t('common.add') }}
           </Button>
+        </EmptyContent>
+      </Empty>
+    </template>
+  </MasterDetailSidebarLayout>
+
+  <!-- Create dialog -->
+  <Dialog v-model:open="createDialogOpen">
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>{{ $t('mcp.addTitle') }}</DialogTitle>
+      </DialogHeader>
+      <form
+        class="mt-4 flex flex-col gap-4"
+        @submit.prevent="handleCreateDraft"
+      >
+        <div class="space-y-1.5">
+          <Label>{{ $t('common.name') }}</Label>
+          <Input
+            v-model="createName"
+            :placeholder="$t('common.namePlaceholder')"
+          />
+        </div>
+        <div class="space-y-1.5">
+          <Label>{{ $t('common.type') }}</Label>
+          <Select v-model="createType">
+            <SelectTrigger class="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="stdio">
+                  {{ $t('mcp.types.stdio') }}
+                </SelectItem>
+                <SelectItem value="remote">
+                  {{ $t('mcp.types.remote') }}
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+        <DialogFooter>
           <DialogClose as-child>
-            <Button>
-              {{ $t('common.confirm') }}
+            <Button variant="outline">
+              {{ $t('common.cancel') }}
             </Button>
           </DialogClose>
+          <Button
+            type="submit"
+            :disabled="!createName.trim()"
+          >
+            {{ $t('common.confirm') }}
+          </Button>
         </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Import dialog -->
+  <Dialog v-model:open="importDialogOpen">
+    <DialogContent class="sm:max-w-lg w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] sm:w-auto">
+      <DialogHeader>
+        <DialogTitle>{{ $t('common.import') }} MCP Servers</DialogTitle>
+      </DialogHeader>
+      <p class="text-sm text-muted-foreground mt-2">
+        {{ $t('mcp.importHint') }}
+      </p>
+      <div class="h-[350px] rounded-md border overflow-hidden mt-3">
+        <MonacoEditor
+          v-model="importJson"
+          language="json"
+        />
+      </div>
+      <DialogFooter class="mt-4">
+        <DialogClose as-child>
+          <Button variant="outline">
+            {{ $t('common.cancel') }}
+          </Button>
+        </DialogClose>
+        <Button
+          :disabled="importSubmitting || !importJson.trim()"
+          @click="handleImportFromDialog"
+        >
+          <Spinner
+            v-if="importSubmitting"
+            class="mr-1.5"
+          />
+          {{ $t('common.import') }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Export dialog -->
+  <Dialog v-model:open="exportDialogOpen">
+    <DialogContent class="sm:max-w-lg w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] sm:w-auto">
+      <DialogHeader>
+        <DialogTitle>{{ $t('common.export') }} mcpServers</DialogTitle>
+      </DialogHeader>
+      <div class="h-[350px] rounded-md border overflow-hidden mt-4">
+        <MonacoEditor
+          :model-value="exportJson"
+          language="json"
+          :readonly="true"
+        />
+      </div>
+      <DialogFooter class="mt-4">
+        <Button
+          variant="outline"
+          @click="handleCopyExport"
+        >
+          {{ $t('common.copy') }}
+        </Button>
+        <DialogClose as-child>
+          <Button>
+            {{ $t('common.confirm') }}
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, h, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
-import { type ColumnDef } from '@tanstack/vue-table'
 import {
   Badge,
   Button,
@@ -559,41 +422,51 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
   Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
   Label,
+  ScrollArea,
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
   Spinner,
   Switch,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
   TagsInput,
   TagsInputInput,
   TagsInputItem,
   TagsInputItemDelete,
   TagsInputItemText,
-  Textarea,
+  Toggle,
 } from '@memoh/ui'
-import DataTable from '@/components/data-table/index.vue'
-import { useKeyValueTags } from '@/composables/useKeyValueTags'
+import MasterDetailSidebarLayout from '@/components/master-detail-sidebar-layout/index.vue'
+import MonacoEditor from '@/components/monaco-editor/index.vue'
+import KeyValueEditor from '@/components/key-value-editor/index.vue'
+import type { KeyValuePair } from '@/components/key-value-editor/index.vue'
+import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import {
   getBotsByBotIdMcp,
   postBotsByBotIdMcp,
   putBotsByBotIdMcpById,
   deleteBotsByBotIdMcpById,
-  postBotsByBotIdMcpOpsBatchDelete,
 } from '@memoh/sdk'
 import type { McpUpsertRequest, McpImportRequest } from '@memoh/sdk'
 import { client } from '@memoh/sdk/client'
-import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import { resolveApiErrorMessage } from '@/utils/api-error'
-import { tagsToRecord } from '@/utils/key-value-tags'
 import { useClipboard } from '@/composables/useClipboard'
 
 interface McpItem {
@@ -614,60 +487,62 @@ interface McpServerEntry {
   transport?: string
 }
 
+const DRAFT_ID = ''
+
+const IMPORT_EXAMPLE = JSON.stringify({
+  mcpServers: {
+    'example-stdio': {
+      command: 'npx',
+      args: ['-y', '@example/mcp-server'],
+      env: { API_KEY: 'your-api-key' },
+    },
+    'example-remote': {
+      url: 'https://example.com/mcp',
+      headers: { Authorization: 'Bearer your-token' },
+      transport: 'sse',
+    },
+  },
+}, null, 2)
+
 const props = defineProps<{ botId: string }>()
 const { t } = useI18n()
 const { copyText } = useClipboard()
 
 const loading = ref(false)
 const items = ref<McpItem[]>([])
-const formDialogOpen = ref(false)
-const editingItem = ref<McpItem | null>(null)
+const selectedItem = ref<McpItem | null>(null)
+const searchText = ref('')
 const submitting = ref(false)
-const addDialogTab = ref<'single' | 'import'>('single')
-const importJsonPlaceholder = `{
-  "mcpServers": {
-    "hello": {
-      "command": "npx",
-      "args": ["-y", "mcp-hello-world"]
-    }
-  }
-}`
+
+const createDialogOpen = ref(false)
+const createName = ref('')
+const importDialogOpen = ref(false)
+const exportDialogOpen = ref(false)
 const importJson = ref('')
 const importSubmitting = ref(false)
-const exportDialogOpen = ref(false)
 const exportJson = ref('')
-const selectedIds = ref<string[]>([])
-
-const connectionMode = ref<'stdio' | 'remote'>('stdio')
 
+const createType = ref<'stdio' | 'remote'>('stdio')
+const connectionType = ref<'stdio' | 'remote'>('stdio')
 const formData = ref({
   name: '',
   command: '',
   url: '',
   cwd: '',
-  transport: 'http',
+  transport: 'http' as 'http' | 'sse',
   active: true,
 })
-
-// Edit dialog: JSON panel synced with formData
-const editJson = ref('')
-let editSyncFromJson = false
-
-watch(connectionMode, (mode) => {
-  if (mode === 'stdio') {
-    formData.value.url = ''
-    formData.value.transport = 'http'
-    headerTags.initFromObject(null)
-  } else {
-    formData.value.command = ''
-    formData.value.cwd = ''
-    argsTags.value = []
-    envTags.initFromObject(null)
-  }
-})
 const argsTags = ref<string[]>([])
-const envTags = useKeyValueTags()
-const headerTags = useKeyValueTags()
+const envPairs = ref<KeyValuePair[]>([])
+const headerPairs = ref<KeyValuePair[]>([])
+
+const isDraft = computed(() => selectedItem.value?.id === DRAFT_ID)
+
+const filteredItems = computed(() => {
+  if (!searchText.value) return items.value
+  const kw = searchText.value.toLowerCase()
+  return items.value.filter((i) => i.id === DRAFT_ID || i.name.toLowerCase().includes(kw))
+})
 
 function configValue(config: Record<string, unknown>, key: string): string {
   const val = config?.[key]
@@ -692,162 +567,22 @@ function configMap(config: Record<string, unknown>, key: string): Record<string,
   return {}
 }
 
-function toggleSelection(id: string, checked: boolean) {
-  const set = new Set(selectedIds.value)
-  if (checked) set.add(id)
-  else set.delete(id)
-  selectedIds.value = Array.from(set)
+function recordToPairs(record: Record<string, string>): KeyValuePair[] {
+  return Object.entries(record).map(([key, value]) => ({ key, value }))
 }
 
-function toggleSelectAll(checked: boolean) {
-  selectedIds.value = checked ? items.value.map((i) => i.id) : []
+function pairsToRecord(pairs: KeyValuePair[]): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const p of pairs) {
+    if (p.key.trim()) out[p.key.trim()] = p.value
+  }
+  return out
 }
 
-const isAllSelected = computed(() =>
-  items.value.length > 0 && selectedIds.value.length === items.value.length,
-)
-
-function clearSelection() {
-  selectedIds.value = []
-}
-
-function itemToExportEntry(item: McpItem): McpServerEntry {
+function selectItem(item: McpItem) {
+  selectedItem.value = item
   const cfg = item.config ?? {}
-  if (item.type === 'stdio') {
-    const entry: McpServerEntry = {
-      command: configValue(cfg, 'command') || undefined,
-      args: configArray(cfg, 'args').length ? configArray(cfg, 'args') : undefined,
-      cwd: configValue(cfg, 'cwd') || undefined,
-      env: Object.keys(configMap(cfg, 'env')).length ? configMap(cfg, 'env') : undefined,
-    }
-    return entry
-  }
-  const entry: McpServerEntry = {
-    url: configValue(cfg, 'url') || undefined,
-    headers: Object.keys(configMap(cfg, 'headers')).length ? configMap(cfg, 'headers') : undefined,
-    transport: item.type === 'sse' ? 'sse' : undefined,
-  }
-  return entry
-}
-
-const columns = computed<ColumnDef<McpItem>[]>(() => [
-  {
-    id: 'select',
-    header: () =>
-      h('div', { class: 'flex items-center justify-center py-4' }, [
-        h('input', {
-          type: 'checkbox',
-          class: 'size-4 cursor-pointer rounded border border-input',
-          'aria-label': 'Select all MCP servers',
-          checked: isAllSelected.value,
-          onChange: (e: Event) => {
-            toggleSelectAll((e.target as HTMLInputElement).checked)
-          },
-        }),
-      ]),
-    cell: ({ row }) => {
-      const id = row.original.id
-      return h('div', { class: 'flex justify-center' }, [
-        h('input', {
-          type: 'checkbox',
-          class: 'size-4 cursor-pointer rounded border border-input',
-          'aria-label': `Select MCP server ${row.original.name}`,
-          checked: selectedIds.value.includes(id),
-          onChange: (e: Event) => {
-            toggleSelection(id, (e.target as HTMLInputElement).checked)
-          },
-        }),
-      ])
-    },
-  },
-  {
-    accessorKey: 'name',
-    header: () => h('div', { class: 'text-left py-4' }, t('common.name')),
-  },
-  {
-    accessorKey: 'type',
-    header: () => h('div', { class: 'text-left' }, t('common.type')),
-    cell: ({ row }) => h(Badge, { variant: 'outline' }, () => row.original.type),
-  },
-  {
-    id: 'target',
-    header: () => h('div', { class: 'text-left' }, 'Command / URL'),
-    cell: ({ row }) => {
-      const cfg = row.original.config ?? {}
-      const cmd = configValue(cfg, 'command')
-      const url = configValue(cfg, 'url')
-      const args = configArray(cfg, 'args')
-      const full =
-        cmd
-          ? (args.length ? `${cmd} ${args.join(' ')}` : cmd)
-          : (url || '-')
-      return h('span', {
-        class: 'font-mono text-xs block max-w-[280px] truncate',
-        title: full,
-      }, full)
-    },
-  },
-  {
-    id: 'status',
-    header: () => h('div', { class: 'text-center' }, t('mcp.active')),
-    cell: ({ row }) => h('div', { class: 'text-center' },
-      h(Badge, { variant: row.original.is_active ? 'default' : 'secondary' },
-        () => row.original.is_active ? 'ON' : 'OFF'),
-    ),
-  },
-  {
-    id: 'actions',
-    header: () => h('div', { class: 'text-center' }, t('common.operation')),
-    cell: ({ row }) => h('div', { class: 'flex gap-2 justify-center' }, [
-      h(Button, {
-        size: 'sm',
-        variant: 'outline',
-        onClick: () => openEditDialog(row.original),
-      }, () => t('common.edit')),
-      h(ConfirmPopover, {
-        message: t('mcp.deleteConfirm'),
-        onConfirm: () => handleDelete(row.original.id),
-      }, {
-        trigger: () => h(Button, {
-          size: 'sm',
-          variant: 'destructive',
-        }, () => t('common.delete')),
-      }),
-    ]),
-  },
-])
-
-async function loadList() {
-  loading.value = true
-  try {
-    const { data } = await getBotsByBotIdMcp({
-      path: { bot_id: props.botId },
-      throwOnError: true,
-    })
-    items.value = data.items ?? []
-  } catch (error) {
-    toast.error(resolveError(error, t('common.loadFailed')))
-  } finally {
-    loading.value = false
-  }
-}
-
-function openCreateDialog() {
-  editingItem.value = null
-  addDialogTab.value = 'single'
-  importJson.value = ''
-  connectionMode.value = 'stdio'
-  formData.value = { name: '', command: '', url: '', cwd: '', transport: 'http', active: true }
-  argsTags.value = []
-  envTags.initFromObject(null)
-  headerTags.initFromObject(null)
-  formDialogOpen.value = true
-}
-
-function openEditDialog(item: McpItem) {
-  editingItem.value = item
-  const cfg = item.config ?? {}
-  connectionMode.value = item.type === 'stdio' ? 'stdio' : 'remote'
+  connectionType.value = item.type === 'stdio' ? 'stdio' : 'remote'
   formData.value = {
     name: item.name,
     command: configValue(cfg, 'command'),
@@ -857,194 +592,163 @@ function openEditDialog(item: McpItem) {
     active: !!item.is_active,
   }
   argsTags.value = configArray(cfg, 'args')
-  envTags.initFromObject(configMap(cfg, 'env'))
-  headerTags.initFromObject(configMap(cfg, 'headers'))
-  editSyncFromJson = false
-  syncFormToEditJson()
-  formDialogOpen.value = true
+  envPairs.value = recordToPairs(configMap(cfg, 'env'))
+  headerPairs.value = recordToPairs(configMap(cfg, 'headers'))
 }
 
-function buildFormToEntry(): McpServerEntry | null {
-  const d = formData.value
-  const name = d.name.trim()
-  if (!name) return null
-  if (d.command.trim()) {
-    const entry: McpServerEntry = {
-      command: d.command.trim(),
-      args: argsTags.value.length ? argsTags.value : undefined,
-      cwd: d.cwd.trim() || undefined,
-    }
-    const env = tagsToRecord(envTags.tagList.value)
-    if (Object.keys(env).length > 0) entry.env = env
-    return entry
-  }
-  if (d.url.trim()) {
-    const entry: McpServerEntry = {
-      url: d.url.trim(),
-      transport: d.transport === 'sse' ? 'sse' : undefined,
-    }
-    const headers = tagsToRecord(headerTags.tagList.value)
-    if (Object.keys(headers).length > 0) entry.headers = headers
-    return entry
-  }
-  return null
+function removeDraft() {
+  items.value = items.value.filter((i) => i.id !== DRAFT_ID)
 }
 
-function syncFormToEditJson() {
-  if (editSyncFromJson) return
-  const entry = buildFormToEntry()
-  if (!entry) {
-    editJson.value = ''
-    return
-  }
-  const name = formData.value.name.trim()
-  const mcpServers: Record<string, McpServerEntry> = { [name]: entry }
-  editJson.value = JSON.stringify({ mcpServers }, null, 2)
+function openCreateDialog() {
+  createName.value = ''
+  createType.value = 'stdio'
+  createDialogOpen.value = true
 }
 
-function syncEditJsonToForm() {
-  const raw = editJson.value.trim()
-  if (!raw) return
-  editSyncFromJson = true
-  try {
-    let parsed: { mcpServers?: Record<string, McpServerEntry> } = JSON.parse(raw)
-    if (!parsed.mcpServers && typeof parsed === 'object' && !Array.isArray(parsed)) {
-      parsed = { mcpServers: parsed as Record<string, McpServerEntry> }
-    }
-    const servers = parsed.mcpServers
-    if (!servers || typeof servers !== 'object') {
-      editSyncFromJson = false
-      return
-    }
-    const entries = Object.entries(servers)
-    const single = entries.length === 1 ? entries[0] : null
-    if (!single) {
-      editSyncFromJson = false
-      return
-    }
-    const [name, e] = single
-    if (e.command) {
-      connectionMode.value = 'stdio'
-      formData.value = {
-        name,
-        command: e.command ?? '',
-        url: '',
-        cwd: e.cwd ?? '',
-        transport: 'http',
-        active: formData.value.active,
-      }
-      argsTags.value = e.args ?? []
-      envTags.initFromObject(e.env ?? null)
-      headerTags.initFromObject(null)
-    } else if (e.url) {
-      connectionMode.value = 'remote'
-      formData.value = {
-        name,
-        command: '',
-        url: e.url ?? '',
-        cwd: '',
-        transport: e.transport === 'sse' ? 'sse' : 'http',
-        active: formData.value.active,
-      }
-      argsTags.value = []
-      envTags.initFromObject(null)
-      headerTags.initFromObject(e.headers ?? null)
-    }
-  } catch {
-    // ignore parse error
-  }
-  editSyncFromJson = false
+function openImportDialog() {
+  importJson.value = IMPORT_EXAMPLE
+  importDialogOpen.value = true
 }
 
-function buildRequestBody(): McpUpsertRequest {
+function handleCreateDraft() {
+  const name = createName.value.trim()
+  if (!name) return
+  removeDraft()
+  const draft: McpItem = {
+    id: DRAFT_ID,
+    name,
+    type: createType.value === 'stdio' ? 'stdio' : 'http',
+    config: {},
+    is_active: true,
+  }
+  items.value = [draft, ...items.value]
+  selectItem(draft)
+  createDialogOpen.value = false
+}
+
+function itemToExportEntry(item: McpItem): McpServerEntry {
+  const cfg = item.config ?? {}
+  if (item.type === 'stdio') {
+    return {
+      command: configValue(cfg, 'command') || undefined,
+      args: configArray(cfg, 'args').length ? configArray(cfg, 'args') : undefined,
+      cwd: configValue(cfg, 'cwd') || undefined,
+      env: Object.keys(configMap(cfg, 'env')).length ? configMap(cfg, 'env') : undefined,
+    }
+  }
+  return {
+    url: configValue(cfg, 'url') || undefined,
+    headers: Object.keys(configMap(cfg, 'headers')).length ? configMap(cfg, 'headers') : undefined,
+    transport: item.type === 'sse' ? 'sse' : undefined,
+  }
+}
+
+function buildRequestBody(
+  fd: typeof formData.value,
+  mode: 'stdio' | 'remote',
+  args: string[],
+  env: KeyValuePair[],
+  headers: KeyValuePair[],
+): McpUpsertRequest {
   const body: McpUpsertRequest = {
-    name: formData.value.name.trim(),
-    is_active: formData.value.active,
+    name: fd.name.trim(),
+    is_active: fd.active,
   }
-  if (formData.value.command.trim()) {
-    body.command = formData.value.command.trim()
-    if (argsTags.value.length > 0) body.args = argsTags.value
-    const env = tagsToRecord(envTags.tagList.value)
-    if (Object.keys(env).length > 0) body.env = env
-    if (formData.value.cwd.trim()) body.cwd = formData.value.cwd.trim()
-  } else if (formData.value.url.trim()) {
-    body.url = formData.value.url.trim()
-    const headers = tagsToRecord(headerTags.tagList.value)
-    if (Object.keys(headers).length > 0) body.headers = headers
-    if (formData.value.transport === 'sse') body.transport = 'sse'
+  if (mode === 'stdio') {
+    body.command = fd.command.trim()
+    if (args.length > 0) body.args = args
+    const envRecord = pairsToRecord(env)
+    if (Object.keys(envRecord).length > 0) body.env = envRecord
+    if (fd.cwd.trim()) body.cwd = fd.cwd.trim()
+  } else {
+    body.url = fd.url.trim()
+    const headerRecord = pairsToRecord(headers)
+    if (Object.keys(headerRecord).length > 0) body.headers = headerRecord
+    if (fd.transport === 'sse') body.transport = 'sse'
   }
   return body
 }
 
+async function loadList() {
+  loading.value = true
+  try {
+    const { data } = await getBotsByBotIdMcp({
+      path: { bot_id: props.botId },
+      throwOnError: true,
+    })
+    const serverItems: McpItem[] = data.items ?? []
+    const draft = items.value.find((i) => i.id === DRAFT_ID)
+    items.value = draft ? [draft, ...serverItems] : serverItems
+
+    if (selectedItem.value && selectedItem.value.id !== DRAFT_ID) {
+      const still = serverItems.find((i) => i.id === selectedItem.value!.id)
+      if (still) selectItem(still)
+      else selectedItem.value = null
+    }
+    if (!selectedItem.value && items.value.length > 0) {
+      selectItem(items.value[0])
+    }
+  } catch (error) {
+    toast.error(resolveApiErrorMessage(error, t('mcp.loadFailed')))
+  } finally {
+    loading.value = false
+  }
+}
+
 async function handleSubmit() {
+  if (!selectedItem.value) return
   submitting.value = true
   try {
-    const body = buildRequestBody()
-    if (editingItem.value) {
-      await putBotsByBotIdMcpById({
-        path: { bot_id: props.botId, id: editingItem.value.id },
-        body,
-        throwOnError: true,
-      })
-    } else {
-      await postBotsByBotIdMcp({
+    const body = buildRequestBody(formData.value, connectionType.value, argsTags.value, envPairs.value, headerPairs.value)
+    if (isDraft.value) {
+      const { data } = await postBotsByBotIdMcp({
         path: { bot_id: props.botId },
         body,
         throwOnError: true,
       })
+      removeDraft()
+      await loadList()
+      const created = items.value.find((i) => i.id === data?.id) ?? items.value.find((i) => i.name === body.name)
+      if (created) selectItem(created)
+      toast.success(t('mcp.createSuccess'))
+    } else {
+      await putBotsByBotIdMcpById({
+        path: { bot_id: props.botId, id: selectedItem.value.id },
+        body,
+        throwOnError: true,
+      })
+      await loadList()
+      toast.success(t('mcp.updateSuccess'))
     }
-    formDialogOpen.value = false
-    await loadList()
-    toast.success(editingItem.value ? t('mcp.updateSuccess') : t('mcp.createSuccess'))
   } catch (error) {
-    toast.error(resolveError(error, t('common.saveFailed')))
+    toast.error(resolveApiErrorMessage(error, t('common.saveFailed')))
   } finally {
     submitting.value = false
   }
 }
 
-async function handleDelete(id: string) {
+async function handleDelete(item: McpItem) {
+  if (item.id === DRAFT_ID) {
+    removeDraft()
+    selectedItem.value = items.value.length > 0 ? items.value[0] : null
+    if (selectedItem.value) selectItem(selectedItem.value)
+    return
+  }
   try {
     await deleteBotsByBotIdMcpById({
-      path: { bot_id: props.botId, id },
+      path: { bot_id: props.botId, id: item.id },
       throwOnError: true,
     })
-    selectedIds.value = selectedIds.value.filter((x) => x !== id)
+    if (selectedItem.value?.id === item.id) selectedItem.value = null
     await loadList()
     toast.success(t('mcp.deleteSuccess'))
   } catch (error) {
-    toast.error(resolveError(error, t('mcp.deleteFailed')))
+    toast.error(resolveApiErrorMessage(error, t('mcp.deleteFailed')))
   }
 }
 
-async function handleBatchDelete() {
-  if (selectedIds.value.length === 0) return
-  try {
-    await postBotsByBotIdMcpOpsBatchDelete({
-      path: { bot_id: props.botId },
-      body: { ids: selectedIds.value },
-      throwOnError: true,
-    })
-    selectedIds.value = []
-    await loadList()
-    toast.success(t('mcp.deleteSuccess'))
-  } catch (error) {
-    toast.error(resolveError(error, t('mcp.deleteFailed')))
-  }
-}
-
-function handleBatchExport() {
-  const selected = items.value.filter((i) => selectedIds.value.includes(i.id))
-  if (selected.length === 0) return
-  const mcpServers: Record<string, McpServerEntry> = {}
-  selected.forEach((item) => {
-    mcpServers[item.name] = itemToExportEntry(item)
-  })
-  exportJson.value = JSON.stringify({ mcpServers }, null, 2)
-  exportDialogOpen.value = true
-}
-
-async function handleImport() {
+async function handleImportFromDialog() {
   importSubmitting.value = true
   try {
     let parsed: McpImportRequest = JSON.parse(importJson.value)
@@ -1057,27 +761,48 @@ async function handleImport() {
       body: parsed,
       throwOnError: true,
     })
-    formDialogOpen.value = false
+    importDialogOpen.value = false
     importJson.value = ''
     await loadList()
     toast.success(t('mcp.importSuccess'))
   } catch (error) {
-    toast.error(resolveError(error, t('mcp.importFailed')))
+    toast.error(resolveApiErrorMessage(error, t('mcp.importFailed')))
   } finally {
     importSubmitting.value = false
   }
 }
 
+function handleExportSingle() {
+  if (!selectedItem.value || !selectedItem.value.id) return
+  const mcpServers: Record<string, McpServerEntry> = {
+    [selectedItem.value.name]: itemToExportEntry(selectedItem.value),
+  }
+  exportJson.value = JSON.stringify({ mcpServers }, null, 2)
+  exportDialogOpen.value = true
+}
+
 function handleCopyExport() {
   void copyText(exportJson.value)
   toast.success(t('common.copied'))
 }
 
-function resolveError(error: unknown, fallback: string): string {
-  return resolveApiErrorMessage(error, fallback)
-}
+watch(connectionType, (mode) => {
+  if (mode === 'stdio') {
+    formData.value.url = ''
+    formData.value.transport = 'http'
+    headerPairs.value = []
+  } else {
+    formData.value.command = ''
+    formData.value.cwd = ''
+    argsTags.value = []
+    envPairs.value = []
+  }
+})
 
 watch(() => props.botId, () => {
-  if (props.botId) loadList()
+  if (props.botId) {
+    selectedItem.value = null
+    loadList()
+  }
 }, { immediate: true })
 </script>
diff --git a/packages/web/src/pages/bots/detail.vue b/packages/web/src/pages/bots/detail.vue
index 52f9a47a..0c496099 100644
--- a/packages/web/src/pages/bots/detail.vue
+++ b/packages/web/src/pages/bots/detail.vue
@@ -137,6 +137,16 @@
               </KeepAlive>
             </div>
           </template>
+          <template v-else-if="activeTab === 'mcp'">
+            <div class="h-full relative">
+              <KeepAlive>
+                <BotMcp
+                  :bot-id="botId"
+                  :bot-type="bot?.type"
+                />
+              </KeepAlive>
+            </div>
+          </template>
           <ScrollArea
             v-else
             class="max-h-full h-full"