From 704d06fee5ffa6679cad73315e8f4063a2d33921 Mon Sep 17 00:00:00 2001
From: zhangmo8 <zhangmo8@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:06:14 +0800
Subject: [PATCH 1/5] feat(mcp): streamline market interactions

---
 src/main/presenter/mcpPresenter/index.ts      |  14 ++
 src/main/routes/index.ts                      |   9 +
 src/renderer/api/McpClient.ts                 |  10 ++
 .../settings/components/McpBuiltinMarket.vue  | 155 +++++++++---------
 src/shared/contracts/routes.ts                |   2 +
 src/shared/contracts/routes/mcp.routes.ts     |  11 ++
 .../types/presenters/core.presenter.d.ts      |   1 +
 7 files changed, 123 insertions(+), 79 deletions(-)

diff --git a/src/main/presenter/mcpPresenter/index.ts b/src/main/presenter/mcpPresenter/index.ts
index 5dd1b9e4f3..ab5b10f203 100644
--- a/src/main/presenter/mcpPresenter/index.ts
+++ b/src/main/presenter/mcpPresenter/index.ts
@@ -393,6 +393,20 @@ export class McpPresenter implements IMCPPresenter {
     return false
   }
 
+  async listInstalledServerIds(source: string, sourceIds: string[]): Promise<string[]> {
+    const requestedIds = new Set(sourceIds)
+    if (requestedIds.size === 0) return []
+
+    const installedIds = new Set<string>()
+    const servers = await this.configPresenter.getMcpServers()
+    for (const config of Object.values(servers)) {
+      if (config.source === source && config.sourceId && requestedIds.has(config.sourceId)) {
+        installedIds.add(config.sourceId)
+      }
+    }
+    return [...installedIds]
+  }
+
   async updateMcpRouterServersAuth(apiKey: string): Promise<void> {
     const servers = await this.configPresenter.getMcpServers()
     const updates: Array<{ name: string; config: Partial<MCPServerConfig> }> = []
diff --git a/src/main/routes/index.ts b/src/main/routes/index.ts
index 5bc832b6d4..449f6a66f2 100644
--- a/src/main/routes/index.ts
+++ b/src/main/routes/index.ts
@@ -167,6 +167,7 @@ import {
   mcpRouterGetApiKeyRoute,
   mcpRouterInstallServerRoute,
   mcpRouterIsServerInstalledRoute,
+  mcpRouterListInstalledServerIdsRoute,
   mcpRouterListServersRoute,
   mcpRouterSetApiKeyRoute,
   mcpRouterUpdateServersAuthRoute,
@@ -3921,6 +3922,14 @@ export async function dispatchDeepchatRoute(
       })
     }
 
+    case mcpRouterListInstalledServerIdsRoute.name: {
+      const input = mcpRouterListInstalledServerIdsRoute.input.parse(rawInput)
+      return mcpRouterListInstalledServerIdsRoute.output.parse({
+        installedSourceIds:
+          (await runtime.mcpPresenter.listInstalledServerIds?.(input.source, input.sourceIds)) ?? []
+      })
+    }
+
     case mcpRouterUpdateServersAuthRoute.name: {
       const input = mcpRouterUpdateServersAuthRoute.input.parse(rawInput)
       await runtime.mcpPresenter.updateMcpRouterServersAuth?.(input.apiKey)
diff --git a/src/renderer/api/McpClient.ts b/src/renderer/api/McpClient.ts
index b7ff08218f..fb04ddb0b4 100644
--- a/src/renderer/api/McpClient.ts
+++ b/src/renderer/api/McpClient.ts
@@ -33,6 +33,7 @@ import {
   mcpRouterGetApiKeyRoute,
   mcpRouterInstallServerRoute,
   mcpRouterIsServerInstalledRoute,
+  mcpRouterListInstalledServerIdsRoute,
   mcpRouterListServersRoute,
   mcpRouterSetApiKeyRoute,
   mcpRouterUpdateServersAuthRoute,
@@ -217,6 +218,14 @@ export function createMcpClient(bridge: DeepchatBridge = getDeepchatBridge()) {
     return result.installed
   }
 
+  async function listInstalledServerIds(source: string, sourceIds: string[]) {
+    const result = await bridge.invoke(mcpRouterListInstalledServerIdsRoute.name, {
+      source,
+      sourceIds
+    })
+    return result.installedSourceIds
+  }
+
   async function updateMcpRouterServersAuth(apiKey: string) {
     await bridge.invoke(mcpRouterUpdateServersAuthRoute.name, { apiKey })
   }
@@ -317,6 +326,7 @@ export function createMcpClient(bridge: DeepchatBridge = getDeepchatBridge()) {
     getMcpRouterApiKey,
     setMcpRouterApiKey,
     isServerInstalled,
+    listInstalledServerIds,
     updateMcpRouterServersAuth,
     onServerStarted,
     onServerStopped,
diff --git a/src/renderer/settings/components/McpBuiltinMarket.vue b/src/renderer/settings/components/McpBuiltinMarket.vue
index aff8148a8b..87be12c972 100644
--- a/src/renderer/settings/components/McpBuiltinMarket.vue
+++ b/src/renderer/settings/components/McpBuiltinMarket.vue
@@ -31,7 +31,14 @@
             :placeholder="t('mcp.market.apiKeyPlaceholder')"
             class="w-64"
           />
-          <Button size="sm" @click="saveApiKey">{{ t('common.save') }}</Button>
+          <Button size="sm" :disabled="savingApiKey" @click="saveApiKey">
+            <Icon
+              v-if="savingApiKey"
+              icon="lucide:loader-2"
+              class="mr-1 h-3.5 w-3.5 animate-spin"
+            />
+            {{ t('common.save') }}
+          </Button>
         </div>
       </div>
     </div>
@@ -81,7 +88,9 @@
             <Button
               size="sm"
               :variant="installedServers.has(item.server_key) ? 'secondary' : 'outline'"
-              :disabled="installedServers.has(item.server_key)"
+              :disabled="
+                installedServers.has(item.server_key) || installingServerKeys.has(item.server_key)
+              "
               @click="install(item)"
               :title="
                 installedServers.has(item.server_key)
@@ -91,13 +100,24 @@
               class="w-full md:w-auto"
             >
               <Icon
-                :icon="installedServers.has(item.server_key) ? 'lucide:check' : 'lucide:download'"
-                class="w-3.5 h-3.5 mr-1"
+                :icon="
+                  installingServerKeys.has(item.server_key)
+                    ? 'lucide:loader-2'
+                    : installedServers.has(item.server_key)
+                      ? 'lucide:check'
+                      : 'lucide:download'
+                "
+                :class="[
+                  'mr-1 h-3.5 w-3.5',
+                  installingServerKeys.has(item.server_key) ? 'animate-spin' : ''
+                ]"
               />
               {{
-                installedServers.has(item.server_key)
-                  ? t('mcp.market.installed')
-                  : t('mcp.market.install')
+                installingServerKeys.has(item.server_key)
+                  ? t('common.loading')
+                  : installedServers.has(item.server_key)
+                    ? t('mcp.market.installed')
+                    : t('mcp.market.install')
               }}
             </Button>
           </div>
@@ -108,17 +128,25 @@
         <Icon icon="lucide:loader-2" class="inline w-4 h-4 animate-spin mr-1" />
         {{ t('common.loading') }}
       </div>
-      <div v-if="showPullToLoad && !loading" class="py-4 text-center text-xs text-muted-foreground">
-        {{ t('mcp.market.pullDownToLoad') }}
+      <div
+        v-if="loadError && !loading"
+        class="flex flex-col items-center gap-2 px-4 py-5 text-center text-xs text-muted-foreground"
+        role="status"
+      >
+        <span>{{ t('common.error.operationFailed') }}</span>
+        <Button variant="outline" size="sm" class="h-7 text-xs" @click="fetchPage">
+          <Icon icon="lucide:refresh-cw" class="mr-1 h-3.5 w-3.5" />
+          {{ t('mcp.market.loadMore') }}
+        </Button>
       </div>
       <div
-        v-if="!hasMore && !showPullToLoad && items.length > 0"
+        v-if="!hasMore && !loadError && items.length > 0"
         class="py-4 text-center text-xs text-muted-foreground"
       >
         {{ t('mcp.market.noMore') }}
       </div>
       <div
-        v-if="!loading && items.length === 0"
+        v-if="!loading && !loadError && items.length === 0"
         class="py-8 text-center text-xs text-muted-foreground"
       >
         {{ t('mcp.market.empty') }}
@@ -174,11 +202,12 @@ const limit = ref(20)
 const loading = ref(false)
 const hasMore = ref(true)
 const scrollContainer = ref<HTMLDivElement | null>(null)
-const showPullToLoad = ref(false)
-const canPullMore = ref(false)
 const installedServers = ref<Set<string>>(new Set())
+const installingServerKeys = ref<Set<string>>(new Set())
+const loadError = ref<unknown>(null)
 
 const apiKeyInput = ref('')
+const savingApiKey = ref(false)
 
 const loadApiKey = async () => {
   try {
@@ -188,6 +217,8 @@ const loadApiKey = async () => {
 }
 
 const saveApiKey = async () => {
+  if (savingApiKey.value) return
+  savingApiKey.value = true
   try {
     const newKey = apiKeyInput.value.trim()
     await mcpClient.setMcpRouterApiKey(newKey)
@@ -204,6 +235,8 @@ const saveApiKey = async () => {
       description: String(e),
       variant: 'destructive'
     })
+  } finally {
+    savingApiKey.value = false
   }
 }
 
@@ -211,56 +244,41 @@ const openHowToGetKey = () => {
   window.open('https://mcprouter.co/settings/keys', '_blank')
 }
 
-const checkInstalledServers = async () => {
-  const installed = new Set<string>()
-  for (const item of items.value) {
-    try {
-      // 使用 server_key 作为 sourceId 检查安装状态，因为这是我们在安装时保存的标识符
-      const isInstalled = await mcpClient.isServerInstalled('mcprouter', item.server_key)
-      if (isInstalled) {
-        installed.add(item.server_key)
-      }
-    } catch (e) {
-      console.error('Failed to check installation status:', e)
-    }
+const mergeInstalledServers = async (marketItems: MarketItem[]) => {
+  const sourceIds = [...new Set(marketItems.map((item) => item.server_key))]
+  if (sourceIds.length === 0) return
+
+  try {
+    const installedIds = await mcpClient.listInstalledServerIds('mcprouter', sourceIds)
+    installedServers.value = new Set([...installedServers.value, ...installedIds])
+  } catch (error) {
+    console.error('Failed to check MCP Router installation status:', error)
   }
-  installedServers.value = installed
 }
 
-const fetchPage = async (forcePull = false) => {
-  if (loading.value || (!hasMore.value && !forcePull)) return
+const fetchPage = async () => {
+  if (loading.value || !hasMore.value) return
   loading.value = true
-  showPullToLoad.value = false
+  loadError.value = null
 
   try {
     const data = await mcpClient.listMcpRouterServers(page.value, limit.value)
     const list = data?.servers || []
     if (list.length === 0) {
       hasMore.value = false
-      canPullMore.value = false
       return
     }
+    await mergeInstalledServers(list)
     items.value.push(...list)
     page.value += 1
-
-    // 检查安装状态
-    await checkInstalledServers()
-
-    // 如果是强制拉取且成功获取到数据，重新启用拉取功能
-    if (forcePull) {
-      hasMore.value = true
-      canPullMore.value = true
-    }
+    hasMore.value = list.length >= limit.value
   } catch (e) {
+    loadError.value = e
     toast({
       title: t('settings.provider.operationFailed'),
       description: String(e),
       variant: 'destructive'
     })
-    // 错误时重置状态
-    if (forcePull) {
-      canPullMore.value = false
-    }
   } finally {
     loading.value = false
   }
@@ -277,30 +295,18 @@ const onScroll = () => {
 
   // 正常滚动加载
   if (hasMore.value && nearBottom) {
-    fetchPage()
-    return
-  }
-
-  // 检测过度滚动（内容不足一屏或已滚动到底部且没有更多内容）
-  if (!hasMore.value) {
-    const atBottom = scrollTop + clientHeight >= scrollHeight - 50
-    const overScroll = scrollTop + clientHeight > scrollHeight
-    const contentTooShort = scrollHeight <= clientHeight
-
-    // 启用强制拉取模式
-    if ((atBottom || overScroll || contentTooShort) && !canPullMore.value) {
-      canPullMore.value = true
-      showPullToLoad.value = true
-    }
-
-    // 检测强制拉取触发条件
-    if (canPullMore.value && (overScroll || (contentTooShort && scrollTop > 0))) {
-      fetchPage(true)
-    }
+    void fetchPage()
   }
 }
 
 const install = async (item: MarketItem) => {
+  if (
+    installedServers.value.has(item.server_key) ||
+    installingServerKeys.value.has(item.server_key)
+  ) {
+    return
+  }
+
   try {
     if (!apiKeyInput.value.trim()) {
       toast({
@@ -310,35 +316,26 @@ const install = async (item: MarketItem) => {
       })
       return
     }
+    installingServerKeys.value = new Set([...installingServerKeys.value, item.server_key])
     await mcpClient.setMcpRouterApiKey(apiKeyInput.value.trim())
     const ok = await mcpClient.installMcpRouterServer(item.server_key)
     if (ok) {
       toast({ title: t('mcp.market.installSuccess') })
-      // 更新安装状态 - 使用 server_key 作为标识符
-      installedServers.value.add(item.server_key)
+      installedServers.value = new Set([...installedServers.value, item.server_key])
     } else {
       toast({ title: t('mcp.market.installFailed'), variant: 'destructive' })
     }
   } catch (e) {
     toast({ title: t('mcp.market.installFailed'), description: String(e), variant: 'destructive' })
+  } finally {
+    const nextInstalling = new Set(installingServerKeys.value)
+    nextInstalling.delete(item.server_key)
+    installingServerKeys.value = nextInstalling
   }
 }
 
 onMounted(async () => {
-  await loadApiKey()
-  await fetchPage()
-
-  // 初始加载后检查是否需要启用强制拉取模式
-  setTimeout(() => {
-    const el = scrollContainer.value
-    if (el && !hasMore.value) {
-      const contentTooShort = el.scrollHeight <= el.clientHeight
-      if (contentTooShort && items.value.length > 0) {
-        canPullMore.value = true
-        showPullToLoad.value = true
-      }
-    }
-  }, 100)
+  await Promise.all([loadApiKey(), fetchPage()])
 })
 </script>
 
diff --git a/src/shared/contracts/routes.ts b/src/shared/contracts/routes.ts
index 2bdcd429af..7472ac1ec7 100644
--- a/src/shared/contracts/routes.ts
+++ b/src/shared/contracts/routes.ts
@@ -189,6 +189,7 @@ import {
   mcpRouterGetApiKeyRoute,
   mcpRouterInstallServerRoute,
   mcpRouterIsServerInstalledRoute,
+  mcpRouterListInstalledServerIdsRoute,
   mcpRouterListServersRoute,
   mcpRouterSetApiKeyRoute,
   mcpRouterUpdateServersAuthRoute,
@@ -981,6 +982,7 @@ const DEEPCHAT_ROUTE_CATALOG_PART_5 = {
   [mcpRouterGetApiKeyRoute.name]: mcpRouterGetApiKeyRoute,
   [mcpRouterSetApiKeyRoute.name]: mcpRouterSetApiKeyRoute,
   [mcpRouterIsServerInstalledRoute.name]: mcpRouterIsServerInstalledRoute,
+  [mcpRouterListInstalledServerIdsRoute.name]: mcpRouterListInstalledServerIdsRoute,
   [mcpRouterUpdateServersAuthRoute.name]: mcpRouterUpdateServersAuthRoute,
   [syncGetBackupStatusRoute.name]: syncGetBackupStatusRoute,
   [syncListBackupsRoute.name]: syncListBackupsRoute,
diff --git a/src/shared/contracts/routes/mcp.routes.ts b/src/shared/contracts/routes/mcp.routes.ts
index e3739fd9a9..9da8152d35 100644
--- a/src/shared/contracts/routes/mcp.routes.ts
+++ b/src/shared/contracts/routes/mcp.routes.ts
@@ -372,6 +372,17 @@ export const mcpRouterIsServerInstalledRoute = defineRouteContract({
   })
 })
 
+export const mcpRouterListInstalledServerIdsRoute = defineRouteContract({
+  name: 'mcp.router.listInstalledServerIds',
+  input: z.object({
+    source: z.string().min(1),
+    sourceIds: z.array(z.string().min(1)).max(100)
+  }),
+  output: z.object({
+    installedSourceIds: z.array(z.string())
+  })
+})
+
 export const mcpRouterUpdateServersAuthRoute = defineRouteContract({
   name: 'mcp.router.updateServersAuth',
   input: z.object({
diff --git a/src/shared/types/presenters/core.presenter.d.ts b/src/shared/types/presenters/core.presenter.d.ts
index 2a61292e15..3d31a7cde7 100644
--- a/src/shared/types/presenters/core.presenter.d.ts
+++ b/src/shared/types/presenters/core.presenter.d.ts
@@ -1874,6 +1874,7 @@ export interface IMCPPresenter {
   getMcpRouterApiKey?(): Promise<string | ''>
   setMcpRouterApiKey?(key: string): Promise<void>
   isServerInstalled?(source: string, sourceId: string): Promise<boolean>
+  listInstalledServerIds?(source: string, sourceIds: string[]): Promise<string[]>
   updateMcpRouterServersAuth?(apiKey: string): Promise<void>
 }
 

From 831811b5400b513977a347911139ecd6945c4a3e Mon Sep 17 00:00:00 2001
From: zhangmo8 <zhangmo8@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:09:12 +0800
Subject: [PATCH 2/5] feat(ui): smooth panel and message actions

---
 src/renderer/settings/App.vue                 |  51 ++-
 src/renderer/settings/main.ts                 |  24 +-
 .../settings/settingsRouteComponents.ts       |  27 ++
 .../components/message/MessageBlockError.vue  |  38 ++-
 .../message/MessageBlockToolCall.vue          | 309 ++++++++++--------
 .../src/components/message/MessageToolbar.vue |  49 ++-
 .../components/sidepanel/ChatSidePanel.vue    |  11 -
 .../components/sidepanel/WorkspacePanel.vue   |  19 --
 src/renderer/src/views/ChatTabView.vue        |   4 +-
 9 files changed, 324 insertions(+), 208 deletions(-)
 create mode 100644 src/renderer/settings/settingsRouteComponents.ts

diff --git a/src/renderer/settings/App.vue b/src/renderer/settings/App.vue
index 3b4240201b..7fd8054a0a 100644
--- a/src/renderer/settings/App.vue
+++ b/src/renderer/settings/App.vue
@@ -7,7 +7,7 @@
     <div
       class="w-full h-9 window-drag-region shrink-0 justify-end flex flex-row relative border border-b-0 border-window-inner-border box-border rounded-t-[10px]"
       :class="[
-        isMacOS ? '' : ' ounded-t-none',
+        isMacOS ? '' : 'rounded-t-none',
         isMacOS ? 'bg-window-background' : 'bg-window-background/10'
       ]"
     >
@@ -15,6 +15,8 @@
       <Button
         v-if="!isMacOS"
         class="window-no-drag-region shrink-0 w-12 bg-transparent shadow-none rounded-none hover:bg-red-700/80 hover:text-white text-xs font-medium text-foreground flex items-center justify-center transition-all duration-200 group"
+        :title="t('common.close')"
+        :aria-label="t('common.close')"
         @click="closeWindow"
       >
         <CloseIcon class="h-3! w-3!" />
@@ -41,11 +43,21 @@
                 :data-testid="getSettingsTabTestId(setting.name)"
                 :class="[
                   'flex w-full min-w-0 flex-row items-center gap-2 rounded-md px-2 py-2 text-start transition-colors hover:bg-accent',
-                  route.name === setting.name ? 'bg-accent text-accent-foreground' : ''
+                  route.name === setting.name ? 'bg-accent text-accent-foreground' : '',
+                  pendingRouteName === setting.name ? 'cursor-wait' : ''
                 ]"
-                @click="handleClick(setting.path)"
+                :aria-busy="pendingRouteName === setting.name"
+                @pointerenter="prefetchSetting(setting.name)"
+                @focus="prefetchSetting(setting.name)"
+                @click="handleClick(setting)"
               >
-                <Icon :icon="setting.icon" class="size-4 shrink-0 text-muted-foreground" />
+                <Icon
+                  :icon="pendingRouteName === setting.name ? 'lucide:loader-2' : setting.icon"
+                  :class="[
+                    'size-4 shrink-0 text-muted-foreground',
+                    pendingRouteName === setting.name ? 'animate-spin' : ''
+                  ]"
+                />
                 <span class="min-w-0 truncate text-sm font-medium">{{ t(setting.title) }}</span>
               </button>
             </div>
@@ -116,6 +128,7 @@ import {
 } from '@shared/settingsNavigation'
 import type { SettingsNavigationPayload } from '@shared/settingsNavigation'
 import { useStartupWorkloadStore } from '@/stores/startupWorkloadStore'
+import { preloadSettingsRoute } from './settingsRouteComponents'
 
 const DATABASE_REPAIR_SECTION = 'database-repair'
 const SETTINGS_SECTION_EVENT = 'deepchat:settings-section'
@@ -173,6 +186,7 @@ const pendingProviderImportToken = computed(() => providerDeeplinkImportStore.pr
 const isProcessingProviderPreview = ref(false)
 const startupTimeOrigin = typeof performance !== 'undefined' ? performance.now() : Date.now()
 const hasLoggedFirstRouteResolved = ref(false)
+const pendingRouteName = ref<string | null>(null)
 
 const logSettingsStartup = (phase: string) => {
   const now = typeof performance !== 'undefined' ? performance.now() : Date.now()
@@ -517,8 +531,33 @@ watch(
   { immediate: true }
 )
 
-const handleClick = (path: string) => {
-  router.push(path)
+type SettingsNavigationItem = {
+  name: string
+  path: string
+}
+
+const handleClick = async (setting: SettingsNavigationItem) => {
+  if (pendingRouteName.value || route.path === setting.path) return
+
+  pendingRouteName.value = setting.name
+  try {
+    await router.push(setting.path)
+  } catch (error) {
+    console.error(`[Settings] Failed to navigate to ${setting.name}:`, error)
+  } finally {
+    if (pendingRouteName.value === setting.name) {
+      pendingRouteName.value = null
+    }
+  }
+}
+
+const prefetchSetting = (routeName: string) => {
+  const preload = preloadSettingsRoute(routeName)
+  if (preload) {
+    void preload.catch((error) => {
+      console.debug(`[Settings] Failed to prefetch ${routeName}:`, error)
+    })
+  }
 }
 
 const SETTINGS_TAB_TEST_IDS: Record<string, string> = {
diff --git a/src/renderer/settings/main.ts b/src/renderer/settings/main.ts
index 791280d67b..65d37d29ac 100644
--- a/src/renderer/settings/main.ts
+++ b/src/renderer/settings/main.ts
@@ -10,34 +10,12 @@ import locales, { pluralRules } from '@/i18n'
 import { getSettingsRouteItems } from '@shared/settingsNavigation'
 import { preloadIcons } from '../src/lib/iconLoader'
 import { getRuntimeArch, getRuntimePlatform } from '@api/runtime'
+import { settingsRouteComponents } from './settingsRouteComponents'
 
 const runtimePlatform = getRuntimePlatform()
 const runtimeArch = getRuntimeArch()
 const settingsRouteItems = getSettingsRouteItems(runtimePlatform, runtimeArch)
 
-const settingsRouteComponents = {
-  'settings-overview': () => import('./components/SettingsOverview.vue'),
-  'settings-common': () => import('./components/CommonSettings.vue'),
-  'settings-display': () => import('./components/DisplaySettings.vue'),
-  'settings-environments': () => import('./components/EnvironmentsSettings.vue'),
-  'settings-provider': () => import('./components/ModelProviderSettings.vue'),
-  'settings-dashboard': () => import('./components/SettingsOverview.vue'),
-  'settings-mcp': () => import('./components/McpSettings.vue'),
-  'settings-deepchat-agents': () => import('./components/DeepChatAgentsSettings.vue'),
-  'settings-acp': () => import('./components/AcpSettings.vue'),
-  'settings-remote': () => import('./components/RemoteSettings.vue'),
-  'settings-notifications-hooks': () => import('./components/NotificationsHooksSettings.vue'),
-  'settings-scheduled-tasks': () => import('./components/CronJobsSettings.vue'),
-  'settings-plugins': () => import('./components/PluginsSettings.vue'),
-  'settings-skills': () => import('./components/skills/SkillsSettings.vue'),
-  'settings-prompt': () => import('./components/PromptSetting.vue'),
-  'settings-memory': () => import('./components/MemorySettings.vue'),
-  'settings-knowledge-base': () => import('./components/KnowledgeBaseSettings.vue'),
-  'settings-database': () => import('./components/DataSettings.vue'),
-  'settings-shortcut': () => import('./components/ShortcutSettings.vue'),
-  'settings-about': () => import('./components/AboutUsSettings.vue')
-} as const
-
 // Create i18n instance
 const i18n = createI18n({
   locale: 'zh-CN',
diff --git a/src/renderer/settings/settingsRouteComponents.ts b/src/renderer/settings/settingsRouteComponents.ts
new file mode 100644
index 0000000000..01951357c9
--- /dev/null
+++ b/src/renderer/settings/settingsRouteComponents.ts
@@ -0,0 +1,27 @@
+export const settingsRouteComponents = {
+  'settings-overview': () => import('./components/SettingsOverview.vue'),
+  'settings-common': () => import('./components/CommonSettings.vue'),
+  'settings-display': () => import('./components/DisplaySettings.vue'),
+  'settings-environments': () => import('./components/EnvironmentsSettings.vue'),
+  'settings-provider': () => import('./components/ModelProviderSettings.vue'),
+  'settings-dashboard': () => import('./components/SettingsOverview.vue'),
+  'settings-mcp': () => import('./components/McpSettings.vue'),
+  'settings-deepchat-agents': () => import('./components/DeepChatAgentsSettings.vue'),
+  'settings-acp': () => import('./components/AcpSettings.vue'),
+  'settings-remote': () => import('./components/RemoteSettings.vue'),
+  'settings-notifications-hooks': () => import('./components/NotificationsHooksSettings.vue'),
+  'settings-scheduled-tasks': () => import('./components/CronJobsSettings.vue'),
+  'settings-plugins': () => import('./components/PluginsSettings.vue'),
+  'settings-skills': () => import('./components/skills/SkillsSettings.vue'),
+  'settings-prompt': () => import('./components/PromptSetting.vue'),
+  'settings-memory': () => import('./components/MemorySettings.vue'),
+  'settings-knowledge-base': () => import('./components/KnowledgeBaseSettings.vue'),
+  'settings-database': () => import('./components/DataSettings.vue'),
+  'settings-shortcut': () => import('./components/ShortcutSettings.vue'),
+  'settings-about': () => import('./components/AboutUsSettings.vue')
+} as const
+
+export function preloadSettingsRoute(routeName: string): Promise<unknown> | null {
+  const loader = settingsRouteComponents[routeName as keyof typeof settingsRouteComponents]
+  return loader?.() ?? null
+}
diff --git a/src/renderer/src/components/message/MessageBlockError.vue b/src/renderer/src/components/message/MessageBlockError.vue
index 4480a02b06..6131759034 100644
--- a/src/renderer/src/components/message/MessageBlockError.vue
+++ b/src/renderer/src/components/message/MessageBlockError.vue
@@ -7,22 +7,35 @@
     <span>{{ t(block.content || '') }}</span>
   </div>
   <div v-else class="cursor-default select-none">
-    <div
-      class="text-xs text-red-500 flex flex-row items-center group"
+    <button
+      type="button"
+      class="flex flex-row items-center gap-1 rounded-sm text-xs text-red-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      :aria-expanded="isExpanded"
+      :aria-controls="detailsId"
       @click="isExpanded = !isExpanded"
     >
-      {{ t('common.error.requestFailed')
-      }}<Icon
-        class="hidden group-hover:block ml-2 transition-all"
-        :class="[isExpanded ? ' rotate-90' : '']"
+      {{ t('common.error.requestFailed') }}
+      <Icon
+        class="h-3.5 w-3.5 transition-transform duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] motion-reduce:transition-none"
+        :class="isExpanded ? 'rotate-90' : 'rotate-0'"
         icon="lucide:chevron-right"
-      ></Icon>
-    </div>
+        aria-hidden="true"
+      />
+    </button>
     <div
-      v-if="isExpanded"
-      class="text-xs max-w-full break-all whitespace-pre-wrap leading-7 text-red-400"
+      class="grid overflow-hidden transition-[grid-template-rows,opacity] duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)] motion-reduce:transition-none"
+      :class="isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+      :aria-hidden="!isExpanded"
+      :inert="isExpanded ? undefined : true"
     >
-      {{ t(block.content || '') }}
+      <div class="min-h-0 overflow-hidden">
+        <div
+          :id="detailsId"
+          class="max-w-full break-all whitespace-pre-wrap text-xs leading-7 text-red-400"
+        >
+          {{ t(block.content || '') }}
+        </div>
+      </div>
     </div>
     <div v-if="errorExplanation" class="mt-2 text-red-400 font-medium">
       {{ t('common.error.causeOfError') }} {{ t(errorExplanation) }}
@@ -33,7 +46,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import type { DisplayAssistantMessageBlock } from '@/components/chat/messageListItems'
 const { t } = useI18n()
 
@@ -42,6 +55,7 @@ const props = defineProps<{
 }>()
 
 const isExpanded = ref(false)
+const detailsId = `message-error-details-${useId()}`
 
 const errorExplanation = computed(() => {
   const content = props.block.content || ''
diff --git a/src/renderer/src/components/message/MessageBlockToolCall.vue b/src/renderer/src/components/message/MessageBlockToolCall.vue
index 3a202281b6..33b8b24601 100644
--- a/src/renderer/src/components/message/MessageBlockToolCall.vue
+++ b/src/renderer/src/components/message/MessageBlockToolCall.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="flex flex-col w-full">
-    <div
+    <button
+      type="button"
       data-testid="tool-call-trigger"
-      class="tool-call-pill inline-flex w-fit min-h-7 border rounded-lg items-center gap-2 px-2 py-1.5 text-xs leading-4 transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] select-none overflow-hidden bg-accent hover:bg-accent/40"
+      class="tool-call-pill inline-flex w-fit min-h-7 border rounded-lg items-center gap-2 px-2 py-1.5 text-left text-xs leading-4 transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] select-none overflow-hidden bg-accent hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      :aria-expanded="isExpanded"
+      :aria-controls="detailsId"
       @click="toggleExpanded"
     >
       <span
@@ -45,153 +48,166 @@
         <Icon icon="lucide:image" class="h-3 w-3" />
         {{ imagePreviews.length }}
       </span>
-    </div>
+      <Icon
+        icon="lucide:chevron-right"
+        class="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] motion-reduce:transition-none"
+        :class="isExpanded ? 'rotate-90' : 'rotate-0'"
+        aria-hidden="true"
+      />
+    </button>
 
-    <!-- 详细内容区域 -->
-    <transition
-      enter-active-class="transition-all duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)]"
-      enter-from-class="opacity-0 -translate-y-4 scale-95"
-      enter-to-class="opacity-100 translate-y-0 scale-100"
-      leave-active-class="transition-all duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)]"
-      leave-from-class="opacity-100 translate-y-0 scale-100"
-      leave-to-class="opacity-0 -translate-y-4 scale-95"
+    <div
+      class="grid w-full overflow-hidden transition-[grid-template-rows,opacity,margin-top,margin-bottom] duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)] motion-reduce:transition-none"
+      :class="
+        isExpanded
+          ? 'mt-2 mb-4 grid-rows-[1fr] opacity-100'
+          : 'mt-0 mb-0 grid-rows-[0fr] opacity-0 pointer-events-none'
+      "
+      :aria-hidden="!isExpanded"
+      :inert="isExpanded ? undefined : true"
     >
-      <div
-        v-if="isExpanded"
-        data-testid="tool-call-details"
-        class="rounded-lg border bg-muted text-card-foreground px-2 py-3 mt-2 mb-4 w-full overscroll-contain"
-      >
-        <div v-if="isSubagentOrchestrator" class="flex flex-col gap-1.5">
-          <button
-            v-for="task in subagentTasks"
-            :key="task.normalizedId"
-            data-testid="subagent-task-trigger"
-            type="button"
-            :disabled="!task.sessionId"
-            :class="[
-              'tool-call-pill inline-flex w-full min-h-7 border rounded-lg items-center gap-2 px-2 py-1.5 text-xs leading-4 transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] overflow-hidden',
-              task.sessionId
-                ? 'bg-background hover:bg-accent/60'
-                : 'cursor-default bg-background/80 opacity-70'
-            ]"
-            @click.stop="handleSubagentSessionOpen(task)"
-          >
-            <span
-              :class="getSubagentStatusClass(task.status)"
-              class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium"
+      <div class="min-h-0 overflow-hidden">
+        <div
+          v-if="shouldRenderDetails"
+          :id="detailsId"
+          :data-testid="isExpanded ? 'tool-call-details' : undefined"
+          class="w-full rounded-lg border bg-muted px-2 py-3 text-card-foreground overscroll-contain"
+        >
+          <div v-if="isSubagentOrchestrator" class="flex flex-col gap-1.5">
+            <button
+              v-for="task in subagentTasks"
+              :key="task.normalizedId"
+              data-testid="subagent-task-trigger"
+              type="button"
+              :disabled="!task.sessionId"
+              :class="[
+                'tool-call-pill inline-flex w-full min-h-7 border rounded-lg items-center gap-2 px-2 py-1.5 text-xs leading-4 transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] overflow-hidden',
+                task.sessionId
+                  ? 'bg-background hover:bg-accent/60'
+                  : 'cursor-default bg-background/80 opacity-70'
+              ]"
+              @click.stop="handleSubagentSessionOpen(task)"
             >
-              {{ getSubagentStatusLabel(task.status) }}
-            </span>
-            <span class="shrink-0 font-semibold text-foreground">
-              {{ task.targetAgentName }}
-            </span>
-            <span class="text-muted-foreground">·</span>
-            <span class="min-w-0 flex-1 truncate text-muted-foreground">
-              {{ task.title || task.label }}
-            </span>
-            <Icon
-              v-if="task.sessionId"
-              icon="lucide:chevron-right"
-              class="h-3.5 w-3.5 shrink-0 text-muted-foreground"
-            />
-          </button>
-        </div>
-
-        <div v-else class="flex flex-col gap-4">
-          <div
-            v-if="expandedToolTitle"
-            data-testid="tool-call-expanded-title"
-            class="truncate text-xs font-mono font-medium text-foreground/75"
-          >
-            {{ expandedToolTitle }}
+              <span
+                :class="getSubagentStatusClass(task.status)"
+                class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium"
+              >
+                {{ getSubagentStatusLabel(task.status) }}
+              </span>
+              <span class="shrink-0 font-semibold text-foreground">
+                {{ task.targetAgentName }}
+              </span>
+              <span class="text-muted-foreground">·</span>
+              <span class="min-w-0 flex-1 truncate text-muted-foreground">
+                {{ task.title || task.label }}
+              </span>
+              <Icon
+                v-if="task.sessionId"
+                icon="lucide:chevron-right"
+                class="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+              />
+            </button>
           </div>
 
-          <!-- 参数 -->
-          <div v-if="hasParams" class="space-y-2 flex-1 min-w-0">
-            <div class="flex items-center justify-between gap-2">
-              <h5
-                class="text-xs font-medium text-accent-foreground flex flex-row gap-2 items-center"
-              >
-                <Icon icon="lucide:arrow-up-from-dot" class="w-4 h-4 text-foreground" />
-                {{ t('toolCall.params') }}
-              </h5>
-              <button
-                class="text-xs text-muted-foreground transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] hover:text-foreground"
-                @click.stop="copyParams"
-              >
-                <Icon icon="lucide:copy" class="w-3 h-3 inline-block mr-1" />
-                {{ paramsCopyText }}
-              </button>
-            </div>
+          <div v-else class="flex flex-col gap-4">
             <div
-              data-testid="tool-call-params"
-              class="dc-overscroll-contain rounded-md border bg-background text-xs p-2 min-h-0 max-h-20 overflow-auto"
+              v-if="expandedToolTitle"
+              data-testid="tool-call-expanded-title"
+              class="truncate text-xs font-mono font-medium text-foreground/75"
             >
-              {{ paramsText }}
+              {{ expandedToolTitle }}
             </div>
-          </div>
-
-          <hr v-if="hasParams && hasResponse" class="sm:hidden" />
 
-          <!-- 响应 -->
-          <div v-if="hasResponse" :class="responseLayoutClass">
-            <div class="flex items-center justify-between gap-2">
-              <h5
-                class="text-xs font-medium text-accent-foreground flex flex-row gap-2 items-center"
-              >
-                <Icon
-                  :icon="isTerminalTool ? 'lucide:terminal' : 'lucide:arrow-down-to-dot'"
-                  class="w-4 h-4 text-foreground"
-                />
-                {{ isTerminalTool ? t('toolCall.terminalOutput') : t('toolCall.responseData') }}
-              </h5>
-              <button
-                class="text-xs text-muted-foreground transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] hover:text-foreground"
-                @click.stop="copyResponse"
+            <!-- 参数 -->
+            <div v-if="hasParams" class="space-y-2 flex-1 min-w-0">
+              <div class="flex items-center justify-between gap-2">
+                <h5
+                  class="text-xs font-medium text-accent-foreground flex flex-row gap-2 items-center"
+                >
+                  <Icon icon="lucide:arrow-up-from-dot" class="w-4 h-4 text-foreground" />
+                  {{ t('toolCall.params') }}
+                </h5>
+                <button
+                  class="text-xs text-muted-foreground transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] hover:text-foreground"
+                  @click.stop="copyParams"
+                >
+                  <Icon icon="lucide:copy" class="w-3 h-3 inline-block mr-1" />
+                  {{ paramsCopyText }}
+                </button>
+              </div>
+              <div
+                data-testid="tool-call-params"
+                class="dc-overscroll-contain rounded-md border bg-background text-xs p-2 min-h-0 max-h-20 overflow-auto"
               >
-                <Icon icon="lucide:copy" class="w-3 h-3 inline-block mr-1" />
-                {{ responseCopyText }}
-              </button>
-            </div>
-            <template v-if="diffData">
-              <div class="dc-overscroll-contain min-h-0 overflow-auto">
-                <CodeBlockNode
-                  :node="{
-                    type: 'code_block',
-                    language: diffLanguage,
-                    code: diffData.updatedCode,
-                    raw: diffData.updatedCode,
-                    diff: true,
-                    originalCode: diffData.originalCode,
-                    updatedCode: diffData.updatedCode
-                  }"
-                  :is-dark="themeStore.isDark"
-                  :show-header="false"
-                  class="rounded-md border bg-background text-xs p-2 h-full min-h-0"
-                />
+                {{ paramsText }}
               </div>
-              <div v-if="diffData.replacements !== undefined" class="text-xs text-muted-foreground">
-                {{ t('toolCall.replacementsCount', { count: diffData.replacements }) }}
+            </div>
+
+            <hr v-if="hasParams && hasResponse" class="sm:hidden" />
+
+            <!-- 响应 -->
+            <div v-if="hasResponse" :class="responseLayoutClass">
+              <div class="flex items-center justify-between gap-2">
+                <h5
+                  class="text-xs font-medium text-accent-foreground flex flex-row gap-2 items-center"
+                >
+                  <Icon
+                    :icon="isTerminalTool ? 'lucide:terminal' : 'lucide:arrow-down-to-dot'"
+                    class="w-4 h-4 text-foreground"
+                  />
+                  {{ isTerminalTool ? t('toolCall.terminalOutput') : t('toolCall.responseData') }}
+                </h5>
+                <button
+                  class="text-xs text-muted-foreground transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)] hover:text-foreground"
+                  @click.stop="copyResponse"
+                >
+                  <Icon icon="lucide:copy" class="w-3 h-3 inline-block mr-1" />
+                  {{ responseCopyText }}
+                </button>
               </div>
-            </template>
-            <pre
-              v-else
-              class="dc-overscroll-contain rounded-md border bg-background text-xs p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto"
-              >{{ responseText }}</pre
-            >
-          </div>
+              <template v-if="diffData">
+                <div class="dc-overscroll-contain min-h-0 overflow-auto">
+                  <CodeBlockNode
+                    :node="{
+                      type: 'code_block',
+                      language: diffLanguage,
+                      code: diffData.updatedCode,
+                      raw: diffData.updatedCode,
+                      diff: true,
+                      originalCode: diffData.originalCode,
+                      updatedCode: diffData.updatedCode
+                    }"
+                    :is-dark="themeStore.isDark"
+                    :show-header="false"
+                    class="rounded-md border bg-background text-xs p-2 h-full min-h-0"
+                  />
+                </div>
+                <div
+                  v-if="diffData.replacements !== undefined"
+                  class="text-xs text-muted-foreground"
+                >
+                  {{ t('toolCall.replacementsCount', { count: diffData.replacements }) }}
+                </div>
+              </template>
+              <pre
+                v-else
+                class="dc-overscroll-contain rounded-md border bg-background text-xs p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto"
+                >{{ responseText }}</pre
+              >
+            </div>
 
-          <MessageBlockToolCallImagePreview v-if="hasImagePreviews" :previews="imagePreviews" />
+            <MessageBlockToolCallImagePreview v-if="hasImagePreviews" :previews="imagePreviews" />
+          </div>
         </div>
       </div>
-    </transition>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { useI18n } from 'vue-i18n'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, useId, watch } from 'vue'
 import { CodeBlockNode } from 'markstream-vue'
 import { summarizeToolCallPreview } from '@shared/lib/toolCallSummary'
 import { useThemeStore } from '@/stores/theme'
@@ -230,8 +246,13 @@ const coerceNumericParam = (value: unknown): number | null => {
 }
 
 const isExpanded = ref(false)
+const shouldRenderDetails = ref(false)
 const expansionSource = ref<ExpansionSource>(null)
 const autoExpandDismissed = ref(false)
+const detailsId = `tool-call-details-${useId()}`
+// Slightly past --dc-motion-default (220ms) so the collapse transition finishes first.
+const DETAILS_UNMOUNT_DELAY_MS = 240
+let detailsUnmountTimer: number | null = null
 
 const statusVariant = computed(() => {
   if (props.block.status === 'error') return 'error'
@@ -249,7 +270,7 @@ const functionLabel = computed(() => {
 const displayFunctionName = computed(() => functionLabel.value || t('toolCall.title'))
 
 const expandedToolTitle = computed(() => {
-  if (!isExpanded.value || !props.block.tool_call) {
+  if (!shouldRenderDetails.value || !props.block.tool_call) {
     return ''
   }
 
@@ -586,6 +607,31 @@ watch(
   { immediate: true }
 )
 
+watch(
+  isExpanded,
+  (expanded) => {
+    if (detailsUnmountTimer !== null) {
+      window.clearTimeout(detailsUnmountTimer)
+      detailsUnmountTimer = null
+    }
+
+    if (expanded) {
+      shouldRenderDetails.value = true
+      return
+    }
+
+    if (!shouldRenderDetails.value) return
+
+    detailsUnmountTimer = window.setTimeout(() => {
+      detailsUnmountTimer = null
+      if (!isExpanded.value) {
+        shouldRenderDetails.value = false
+      }
+    }, DETAILS_UNMOUNT_DELAY_MS)
+  },
+  { immediate: true }
+)
+
 const paramsCopyText = ref(t('common.copy'))
 const responseCopyText = ref(t('common.copy'))
 let paramsCopyResetTimer: number | null = null
@@ -658,6 +704,11 @@ function getSubagentModeLabel(mode: string): string {
 }
 
 onBeforeUnmount(() => {
+  if (detailsUnmountTimer !== null) {
+    window.clearTimeout(detailsUnmountTimer)
+    detailsUnmountTimer = null
+  }
+
   if (paramsCopyResetTimer !== null) {
     window.clearTimeout(paramsCopyResetTimer)
     paramsCopyResetTimer = null
diff --git a/src/renderer/src/components/message/MessageToolbar.vue b/src/renderer/src/components/message/MessageToolbar.vue
index 84223670b4..4f3e2e2325 100644
--- a/src/renderer/src/components/message/MessageToolbar.vue
+++ b/src/renderer/src/components/message/MessageToolbar.vue
@@ -2,7 +2,7 @@
   <template v-if="!isCapturingImage">
     <TooltipProvider :ignore-non-keyboard-focus="true">
       <div
-        class="w-full h-7 text-xs text-muted-foreground items-center justify-between flex flex-row opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
+        class="message-toolbar w-full h-7 text-xs text-muted-foreground items-center justify-between flex flex-row opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-within:opacity-100 transition-opacity duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
         :class="[isAssistant ? '' : 'flex-row-reverse']"
       >
         <span v-show="!loading" class="flex flex-row gap-3">
@@ -114,6 +114,8 @@
                   @mousedown="handleCopyImageStart"
                   @mouseup="handleCopyImageEnd"
                   @mouseleave="handleCopyImageCancel"
+                  @keydown.enter.prevent="handleCopyImageKeyboard"
+                  @keydown.space.prevent="handleCopyImageKeyboard"
                 >
                   <Icon v-if="isCapturingImage" icon="lucide:loader" class="w-3 h-3 animate-spin" />
                   <Icon v-else icon="lucide:images" class="w-3 h-3" />
@@ -238,7 +240,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { Button } from '@shadcn/components/ui/button'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import {
   Tooltip,
   TooltipContent,
@@ -258,13 +260,18 @@ const showCopyImageTip = ref(false)
 const showCopyFromTopTip = ref(false)
 
 let copyImagePressTimer: number | null = null
+let copyTipTimer: number | null = null
+let copyImageTipTimer: number | null = null
+let copyFromTopTipTimer: number | null = null
 const LONG_PRESS_DURATION = 800 // 长按时间阈值（毫秒）
 
 const handleCopy = () => {
   emit('copy')
   showCopyTip.value = true
-  setTimeout(() => {
+  if (copyTipTimer !== null) window.clearTimeout(copyTipTimer)
+  copyTipTimer = window.setTimeout(() => {
     showCopyTip.value = false
+    copyTipTimer = null
   }, 2000)
 }
 
@@ -273,8 +280,10 @@ const handleCopyImageStart = () => {
     // 长按触发：从顶部开始截图
     emit('copyImageFromTop')
     showCopyFromTopTip.value = true
-    setTimeout(() => {
+    if (copyFromTopTipTimer !== null) window.clearTimeout(copyFromTopTipTimer)
+    copyFromTopTipTimer = window.setTimeout(() => {
       showCopyFromTopTip.value = false
+      copyFromTopTipTimer = null
     }, 2000)
     copyImagePressTimer = null
   }, LONG_PRESS_DURATION)
@@ -287,12 +296,25 @@ const handleCopyImageEnd = () => {
     copyImagePressTimer = null
     emit('copyImage')
     showCopyImageTip.value = true
-    setTimeout(() => {
+    if (copyImageTipTimer !== null) window.clearTimeout(copyImageTipTimer)
+    copyImageTipTimer = window.setTimeout(() => {
       showCopyImageTip.value = false
+      copyImageTipTimer = null
     }, 2000)
   }
 }
 
+const handleCopyImageKeyboard = (event: KeyboardEvent) => {
+  if (event.repeat || props.isCapturingImage) return
+  emit('copyImage')
+  showCopyImageTip.value = true
+  if (copyImageTipTimer !== null) window.clearTimeout(copyImageTipTimer)
+  copyImageTipTimer = window.setTimeout(() => {
+    showCopyImageTip.value = false
+    copyImageTipTimer = null
+  }, 2000)
+}
+
 const handleCopyImageCancel = () => {
   if (copyImagePressTimer) {
     window.clearTimeout(copyImagePressTimer)
@@ -342,10 +364,27 @@ const hasVariants = computed(() => (props.totalVariants || 0) > 1)
 const allowTrace = computed(() => props.showTrace ?? false)
 const allowMemory = computed(() => props.showMemory ?? false)
 const isReadOnly = computed(() => props.isReadOnly === true)
+
+onBeforeUnmount(() => {
+  for (const timer of [copyImagePressTimer, copyTipTimer, copyImageTipTimer, copyFromTopTipTimer]) {
+    if (timer !== null) window.clearTimeout(timer)
+  }
+})
 </script>
 
 <style scoped>
+.message-toolbar :deep(button) {
+  min-width: 1.75rem;
+  min-height: 1.75rem;
+}
+
 .relative {
   position: relative;
 }
+
+@media (hover: none), (pointer: coarse) {
+  .message-toolbar {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/src/renderer/src/components/sidepanel/ChatSidePanel.vue b/src/renderer/src/components/sidepanel/ChatSidePanel.vue
index 1888e89c4f..20d5335c7b 100644
--- a/src/renderer/src/components/sidepanel/ChatSidePanel.vue
+++ b/src/renderer/src/components/sidepanel/ChatSidePanel.vue
@@ -325,9 +325,6 @@ onBeforeUnmount(() => {
 <style scoped>
 .chat-side-panel-shell {
   contain: layout style paint;
-  transition-duration: var(--dc-motion-default);
-  transition-property: width;
-  transition-timing-function: var(--dc-ease-out-express);
 }
 
 .chat-side-panel-surface {
@@ -351,10 +348,6 @@ onBeforeUnmount(() => {
   transition: none;
 }
 
-.chat-side-panel-shell--resizing {
-  transition: none;
-}
-
 @keyframes workspace-panel-fullscreen-enter {
   from {
     opacity: 0.94;
@@ -380,10 +373,6 @@ onBeforeUnmount(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .chat-side-panel-shell {
-    transition: none;
-  }
-
   .chat-side-panel-surface {
     transition: none;
   }
diff --git a/src/renderer/src/components/sidepanel/WorkspacePanel.vue b/src/renderer/src/components/sidepanel/WorkspacePanel.vue
index b358414877..361cf3a8ba 100644
--- a/src/renderer/src/components/sidepanel/WorkspacePanel.vue
+++ b/src/renderer/src/components/sidepanel/WorkspacePanel.vue
@@ -546,22 +546,3 @@ function getDroppedFilePath(file: File): string | null {
   return legacyPath || null
 }
 </script>
-
-<style scoped>
-.workspace-nav {
-  transition-duration: var(--dc-motion-default);
-  transition-property: width;
-  transition-timing-function: var(--dc-ease-out-express);
-  will-change: width;
-}
-
-.workspace-nav--resizing {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .workspace-nav {
-    transition: none;
-  }
-}
-</style>
diff --git a/src/renderer/src/views/ChatTabView.vue b/src/renderer/src/views/ChatTabView.vue
index 1f415c801a..ace6dc4c06 100644
--- a/src/renderer/src/views/ChatTabView.vue
+++ b/src/renderer/src/views/ChatTabView.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="relative flex h-full min-h-0 w-full flex-row overflow-hidden">
-    <div
-      class="relative flex h-full min-h-0 min-w-0 w-0 flex-1 transition-[width] duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)]"
-    >
+    <div class="relative flex h-full min-h-0 min-w-0 w-0 flex-1">
       <template v-if="isReady">
         <!--
           Wrapper is a real DOM root for page components whose root may be a provider/fragment.

From 8630f0dd896b38d92e1ec26ccf8d7c3f4bb544b5 Mon Sep 17 00:00:00 2001
From: zhangmo8 <zhangmo8@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:10:36 +0800
Subject: [PATCH 3/5] test(ui): cover interaction regressions

---
 test/main/presenter/mcpPresenter.test.ts      |  14 ++
 test/main/routes/contracts.test.ts            |   1 +
 test/main/routes/dispatcher.test.ts           |  15 ++
 test/renderer/api/clients.test.ts             |  13 +-
 .../renderer/components/ChatSidePanel.test.ts |  12 ++
 .../components/McpBuiltinMarket.test.ts       | 146 +++++++++++++++---
 test/renderer/components/SettingsApp.test.ts  |   8 +-
 .../message/MessageBlockBasics.test.ts        |   5 +-
 .../message/MessageBlockToolCall.test.ts      |  43 +++++-
 .../message/MessageToolbar.trace.test.ts      |  16 +-
 .../composables/useMessageWindow.test.ts      |  15 ++
 .../performance/chatRendering.perf.test.ts    |  42 +++++
 12 files changed, 301 insertions(+), 29 deletions(-)

diff --git a/test/main/presenter/mcpPresenter.test.ts b/test/main/presenter/mcpPresenter.test.ts
index ce3dd7e2db..6de54e3995 100644
--- a/test/main/presenter/mcpPresenter.test.ts
+++ b/test/main/presenter/mcpPresenter.test.ts
@@ -454,6 +454,20 @@ describe('McpPresenter#setMcpServerEnabled', () => {
 
     expect(serverManagerMocks.refreshNpmRegistry).toHaveBeenCalledTimes(1)
   })
+
+  it('resolves installed source IDs with one config read', async () => {
+    const configPresenter = createConfigPresenter(true, false, {
+      context7: { source: 'mcprouter', sourceId: 'context7' },
+      context7Alias: { source: 'mcprouter', sourceId: 'context7' },
+      localFiles: { source: 'builtin', sourceId: 'filesystem' }
+    })
+    const presenter = new McpPresenter(configPresenter)
+
+    await expect(
+      presenter.listInstalledServerIds('mcprouter', ['context7', 'filesystem', 'missing'])
+    ).resolves.toEqual(['context7'])
+    expect(configPresenter.getMcpServers).toHaveBeenCalledTimes(1)
+  })
 })
 
 describe('McpPresenter sampling events', () => {
diff --git a/test/main/routes/contracts.test.ts b/test/main/routes/contracts.test.ts
index 7f53579398..3776bc31fb 100644
--- a/test/main/routes/contracts.test.ts
+++ b/test/main/routes/contracts.test.ts
@@ -116,6 +116,7 @@ describe('main kernel contracts', () => {
         'mcp.router.getApiKey',
         'mcp.router.installServer',
         'mcp.router.isServerInstalled',
+        'mcp.router.listInstalledServerIds',
         'mcp.router.listServers',
         'mcp.router.setApiKey',
         'mcp.router.updateServersAuth',
diff --git a/test/main/routes/dispatcher.test.ts b/test/main/routes/dispatcher.test.ts
index 7eb079155a..fb9d2c4b8e 100644
--- a/test/main/routes/dispatcher.test.ts
+++ b/test/main/routes/dispatcher.test.ts
@@ -640,6 +640,7 @@ function createRuntime() {
     getMcpRouterApiKey: vi.fn().mockResolvedValue('router-key'),
     setMcpRouterApiKey: vi.fn().mockResolvedValue(undefined),
     isServerInstalled: vi.fn().mockResolvedValue(false),
+    listInstalledServerIds: vi.fn().mockResolvedValue(['context7']),
     updateMcpRouterServersAuth: vi.fn().mockResolvedValue(undefined)
   } as unknown as IMCPPresenter
   const remoteControlPresenter = {
@@ -3025,6 +3026,15 @@ describe('dispatchDeepchatRoute', () => {
       },
       context
     )
+    const installedIdsResult = await dispatchDeepchatRoute(
+      runtime,
+      'mcp.router.listInstalledServerIds',
+      {
+        source: 'mcprouter',
+        sourceIds: ['context7', 'filesystem']
+      },
+      context
+    )
     const installResult = await dispatchDeepchatRoute(
       runtime,
       'mcp.router.installServer',
@@ -3039,6 +3049,10 @@ describe('dispatchDeepchatRoute', () => {
     expect(mcpPresenter.setMcpRouterApiKey).toHaveBeenCalledWith('new-router-key')
     expect(mcpPresenter.updateMcpRouterServersAuth).toHaveBeenCalledWith('new-router-key')
     expect(mcpPresenter.isServerInstalled).toHaveBeenCalledWith('mcprouter', 'context7')
+    expect(mcpPresenter.listInstalledServerIds).toHaveBeenCalledWith('mcprouter', [
+      'context7',
+      'filesystem'
+    ])
     expect(mcpPresenter.installMcpRouterServer).toHaveBeenCalledWith('context7')
     expect(listResult).toEqual({
       servers: [
@@ -3052,6 +3066,7 @@ describe('dispatchDeepchatRoute', () => {
     expect(saveResult).toEqual({ saved: true })
     expect(authResult).toEqual({ updated: true })
     expect(installedResult).toEqual({ installed: false })
+    expect(installedIdsResult).toEqual({ installedSourceIds: ['context7'] })
     expect(installResult).toEqual({ installed: true })
   })
 
diff --git a/test/renderer/api/clients.test.ts b/test/renderer/api/clients.test.ts
index 8aeaa1526c..2f1d24536a 100644
--- a/test/renderer/api/clients.test.ts
+++ b/test/renderer/api/clients.test.ts
@@ -753,6 +753,8 @@ describe('renderer api clients', () => {
               return { saved: true }
             case 'mcp.router.isServerInstalled':
               return { installed: false }
+            case 'mcp.router.listInstalledServerIds':
+              return { installedSourceIds: ['context7'] }
             case 'mcp.router.updateServersAuth':
               return { updated: true }
             case 'remoteControl.listChannels':
@@ -2519,6 +2521,10 @@ describe('renderer api clients', () => {
     await mcpClient.setMcpRouterApiKey('new-router-key')
     await mcpClient.updateMcpRouterServersAuth('new-router-key')
     const installed = await mcpClient.isServerInstalled('mcprouter', 'context7')
+    const installedIds = await mcpClient.listInstalledServerIds('mcprouter', [
+      'context7',
+      'filesystem'
+    ])
     const installResult = await mcpClient.installMcpRouterServer('context7')
 
     expect(listResult.servers).toEqual([
@@ -2529,6 +2535,7 @@ describe('renderer api clients', () => {
     ])
     expect(key).toBe('router-key')
     expect(installed).toBe(false)
+    expect(installedIds).toEqual(['context7'])
     expect(installResult).toBe(true)
     expect(bridge.invoke).toHaveBeenNthCalledWith(1, 'mcp.router.listServers', {
       page: 1,
@@ -2545,7 +2552,11 @@ describe('renderer api clients', () => {
       source: 'mcprouter',
       sourceId: 'context7'
     })
-    expect(bridge.invoke).toHaveBeenNthCalledWith(6, 'mcp.router.installServer', {
+    expect(bridge.invoke).toHaveBeenNthCalledWith(6, 'mcp.router.listInstalledServerIds', {
+      source: 'mcprouter',
+      sourceIds: ['context7', 'filesystem']
+    })
+    expect(bridge.invoke).toHaveBeenNthCalledWith(7, 'mcp.router.installServer', {
       serverKey: 'context7'
     })
   })
diff --git a/test/renderer/components/ChatSidePanel.test.ts b/test/renderer/components/ChatSidePanel.test.ts
index d71e5c47dc..6dbab952e4 100644
--- a/test/renderer/components/ChatSidePanel.test.ts
+++ b/test/renderer/components/ChatSidePanel.test.ts
@@ -1,9 +1,21 @@
 import { defineComponent, nextTick, reactive } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
 import { WORKSPACE_EVENTS } from '@/events'
 
 describe('ChatSidePanel', () => {
+  it('keeps shell width out of CSS transitions', async () => {
+    const source = await readFile(
+      resolve(process.cwd(), 'src/renderer/src/components/sidepanel/ChatSidePanel.vue'),
+      'utf8'
+    )
+    const shellStyles = source.match(/\.chat-side-panel-shell\s*\{([\s\S]*?)\}/)?.[1] ?? ''
+
+    expect(shellStyles).not.toMatch(/transition(?:-property)?:[^;]*width/)
+  })
+
   const setup = async (options?: {
     open?: boolean
     activeTab?: 'workspace' | 'browser'
diff --git a/test/renderer/components/McpBuiltinMarket.test.ts b/test/renderer/components/McpBuiltinMarket.test.ts
index 5991ab278c..baba03074d 100644
--- a/test/renderer/components/McpBuiltinMarket.test.ts
+++ b/test/renderer/components/McpBuiltinMarket.test.ts
@@ -57,7 +57,12 @@ const findButtonByText = (wrapper: ReturnType<typeof mount>, text: string) => {
 }
 
 describe('McpBuiltinMarket', () => {
-  async function setup() {
+  async function setup(options?: {
+    listMcpRouterServers?: ReturnType<typeof vi.fn>
+    listInstalledServerIds?: ReturnType<typeof vi.fn>
+    installMcpRouterServer?: ReturnType<typeof vi.fn>
+    waitForLoad?: boolean
+  }) {
     vi.resetModules()
 
     const mcpClient = {
@@ -65,24 +70,27 @@ describe('McpBuiltinMarket', () => {
       setMcpRouterApiKey: vi.fn().mockResolvedValue(undefined),
       updateMcpRouterServersAuth: vi.fn().mockResolvedValue(undefined),
       isServerInstalled: vi.fn().mockResolvedValue(false),
-      listMcpRouterServers: vi.fn().mockResolvedValue({
-        servers: [
-          {
-            uuid: 'router-item-1',
-            created_at: '2026-06-11T00:00:00.000Z',
-            updated_at: '2026-06-11T00:00:00.000Z',
-            name: 'context7',
-            author_name: 'upstash',
-            title: 'Context7',
-            description: 'Fetch current docs',
-            content: 'Documentation helper',
-            server_key: 'context7',
-            config_name: 'Context7',
-            server_url: 'https://mcp.context7.com/mcp'
-          }
-        ]
-      }),
-      installMcpRouterServer: vi.fn().mockResolvedValue(true)
+      listInstalledServerIds: options?.listInstalledServerIds ?? vi.fn().mockResolvedValue([]),
+      listMcpRouterServers:
+        options?.listMcpRouterServers ??
+        vi.fn().mockResolvedValue({
+          servers: [
+            {
+              uuid: 'router-item-1',
+              created_at: '2026-06-11T00:00:00.000Z',
+              updated_at: '2026-06-11T00:00:00.000Z',
+              name: 'context7',
+              author_name: 'upstash',
+              title: 'Context7',
+              description: 'Fetch current docs',
+              content: 'Documentation helper',
+              server_key: 'context7',
+              config_name: 'Context7',
+              server_url: 'https://mcp.context7.com/mcp'
+            }
+          ]
+        }),
+      installMcpRouterServer: options?.installMcpRouterServer ?? vi.fn().mockResolvedValue(true)
     }
     const toast = vi.fn()
 
@@ -114,7 +122,9 @@ describe('McpBuiltinMarket', () => {
       await import('../../../src/renderer/settings/components/McpBuiltinMarket.vue')
     ).default
     const wrapper = mount(McpBuiltinMarket)
-    await flushPromises()
+    if (options?.waitForLoad !== false) {
+      await flushPromises()
+    }
 
     return {
       wrapper,
@@ -128,7 +138,8 @@ describe('McpBuiltinMarket', () => {
 
     expect(mcpClient.getMcpRouterApiKey).toHaveBeenCalledTimes(1)
     expect(mcpClient.listMcpRouterServers).toHaveBeenCalledWith(1, 20)
-    expect(mcpClient.isServerInstalled).toHaveBeenCalledWith('mcprouter', 'context7')
+    expect(mcpClient.listInstalledServerIds).toHaveBeenCalledWith('mcprouter', ['context7'])
+    expect(mcpClient.isServerInstalled).not.toHaveBeenCalled()
     expect(wrapper.text()).toContain('Context7')
 
     await wrapper.get('input').setValue('new-router-key')
@@ -145,4 +156,97 @@ describe('McpBuiltinMarket', () => {
     expect(toast).toHaveBeenCalledWith({ title: 'common.saved' })
     expect(toast).toHaveBeenCalledWith({ title: 'mcp.market.installSuccess' })
   })
+
+  it('checks installation status only for items from the newly loaded page', async () => {
+    const createItem = (index: number) => ({
+      uuid: `router-item-${index}`,
+      created_at: '2026-06-11T00:00:00.000Z',
+      updated_at: '2026-06-11T00:00:00.000Z',
+      name: `server-${index}`,
+      author_name: 'deepchat',
+      title: `Server ${index}`,
+      description: 'Server description',
+      server_key: `server-${index}`
+    })
+    const firstPage = Array.from({ length: 20 }, (_, index) => createItem(index + 1))
+    const secondPage = [createItem(21), createItem(22)]
+    const listMcpRouterServers = vi
+      .fn()
+      .mockResolvedValueOnce({ servers: firstPage })
+      .mockResolvedValueOnce({ servers: secondPage })
+    const listInstalledServerIds = vi.fn().mockResolvedValue([])
+    const { wrapper } = await setup({ listMcpRouterServers, listInstalledServerIds })
+
+    const scroller = wrapper.get('.flex-1.overflow-auto')
+    Object.defineProperties(scroller.element, {
+      scrollTop: { configurable: true, value: 800 },
+      clientHeight: { configurable: true, value: 600 },
+      scrollHeight: { configurable: true, value: 1500 }
+    })
+    await scroller.trigger('scroll')
+    await flushPromises()
+
+    expect(listMcpRouterServers).toHaveBeenNthCalledWith(1, 1, 20)
+    expect(listMcpRouterServers).toHaveBeenNthCalledWith(2, 2, 20)
+    expect(listInstalledServerIds).toHaveBeenNthCalledWith(
+      1,
+      'mcprouter',
+      firstPage.map((item) => item.server_key)
+    )
+    expect(listInstalledServerIds).toHaveBeenNthCalledWith(2, 'mcprouter', [
+      'server-21',
+      'server-22'
+    ])
+  })
+
+  it('waits for installation status before exposing a newly loaded card', async () => {
+    let resolveInstalled: ((value: string[]) => void) | undefined
+    const listInstalledServerIds = vi.fn(
+      () => new Promise<string[]>((resolve) => (resolveInstalled = resolve))
+    )
+    const { wrapper } = await setup({ listInstalledServerIds, waitForLoad: false })
+
+    await flushPromises()
+    expect(listInstalledServerIds).toHaveBeenCalledWith('mcprouter', ['context7'])
+    expect(wrapper.text()).not.toContain('Context7')
+
+    resolveInstalled?.(['context7'])
+    await flushPromises()
+    expect(wrapper.text()).toContain('Context7')
+    expect(wrapper.text()).toContain('mcp.market.installed')
+  })
+
+  it('prevents duplicate installs while an item is pending', async () => {
+    let resolveInstall: ((value: boolean) => void) | undefined
+    const installMcpRouterServer = vi.fn(
+      () => new Promise<boolean>((resolve) => (resolveInstall = resolve))
+    )
+    const { wrapper } = await setup({ installMcpRouterServer })
+    const installButton = findButtonByText(wrapper, 'mcp.market.install')
+
+    await installButton.trigger('click')
+    await installButton.trigger('click')
+
+    expect(installMcpRouterServer).toHaveBeenCalledTimes(1)
+    expect(installButton.attributes('disabled')).toBeDefined()
+
+    resolveInstall?.(true)
+    await flushPromises()
+    expect(wrapper.text()).toContain('mcp.market.installed')
+  })
+
+  it('shows an explicit retry action after a page load failure', async () => {
+    const listMcpRouterServers = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValueOnce({ servers: [] })
+    const { wrapper } = await setup({ listMcpRouterServers })
+
+    expect(wrapper.text()).toContain('common.error.operationFailed')
+    await findButtonByText(wrapper, 'mcp.market.loadMore').trigger('click')
+    await flushPromises()
+
+    expect(listMcpRouterServers).toHaveBeenCalledTimes(2)
+    expect(wrapper.text()).toContain('mcp.market.empty')
+  })
 })
diff --git a/test/renderer/components/SettingsApp.test.ts b/test/renderer/components/SettingsApp.test.ts
index 1f989555e4..8d0a72b4d6 100644
--- a/test/renderer/components/SettingsApp.test.ts
+++ b/test/renderer/components/SettingsApp.test.ts
@@ -275,7 +275,8 @@ describe('Settings App', () => {
   it('uses a resolved provider settings path in the sidebar', async () => {
     vi.resetModules()
 
-    const push = vi.fn().mockResolvedValue(undefined)
+    let resolvePush: (() => void) | undefined
+    const push = vi.fn(() => new Promise<void>((resolve) => (resolvePush = resolve)))
     const isReady = vi.fn().mockResolvedValue(undefined)
     const ipcOn = vi.fn()
     const ipcRemoveListener = vi.fn()
@@ -465,6 +466,11 @@ describe('Settings App', () => {
 
     expect(push).toHaveBeenCalledWith('/provider')
     expect(push).not.toHaveBeenCalledWith('/provider/:providerId?')
+    expect(providerSidebarItem.attributes('aria-busy')).toBe('true')
+
+    resolvePush?.()
+    await flushPromises()
+    expect(providerSidebarItem.attributes('aria-busy')).toBe('false')
   })
 
   it('navigates to the requested settings route when a navigate event arrives', async () => {
diff --git a/test/renderer/components/message/MessageBlockBasics.test.ts b/test/renderer/components/message/MessageBlockBasics.test.ts
index dcfea8c70b..2d2f341adf 100644
--- a/test/renderer/components/message/MessageBlockBasics.test.ts
+++ b/test/renderer/components/message/MessageBlockBasics.test.ts
@@ -196,8 +196,11 @@ describe('MessageBlock basics', () => {
       }
     })
 
-    await wrapper.find('.group').trigger('click')
+    const trigger = wrapper.get('button')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+    await trigger.trigger('click')
 
+    expect(trigger.attributes('aria-expanded')).toBe('true')
     expect(wrapper.text()).toContain('common.error.requestFailed')
     expect(wrapper.text()).toContain('common.error.causeOfError')
     expect(wrapper.text()).toContain('common.error.error429')
diff --git a/test/renderer/components/message/MessageBlockToolCall.test.ts b/test/renderer/components/message/MessageBlockToolCall.test.ts
index 05b8b4becb..c6ba794bb6 100644
--- a/test/renderer/components/message/MessageBlockToolCall.test.ts
+++ b/test/renderer/components/message/MessageBlockToolCall.test.ts
@@ -99,9 +99,44 @@ beforeEach(() => {
 
 afterEach(() => {
   selectSessionMock.mockReset()
+  vi.restoreAllMocks()
 })
 
 describe('MessageBlockToolCall', () => {
+  it('does not schedule detail cleanup for an initially collapsed tool', () => {
+    const setTimeoutSpy = vi.spyOn(window, 'setTimeout')
+
+    mount(MessageBlockToolCall, {
+      props: {
+        block: createBlock({
+          tool_call: { id: 'read-1', name: 'read', response: 'file contents' }
+        })
+      }
+    })
+
+    expect(setTimeoutSpy.mock.calls.some(([, delay]) => delay === 240)).toBe(false)
+  })
+
+  it('exposes disclosure semantics and keeps the controlled details ID stable', async () => {
+    const wrapper = mount(MessageBlockToolCall, {
+      props: {
+        block: createBlock({
+          tool_call: { id: 'read-1', name: 'read', response: 'file contents' }
+        })
+      }
+    })
+    const trigger = wrapper.get('[data-testid="tool-call-trigger"]')
+
+    expect(trigger.element.tagName).toBe('BUTTON')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+
+    await trigger.trigger('click')
+
+    const details = wrapper.get('[data-testid="tool-call-details"]')
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(trigger.attributes('aria-controls')).toBe(details.attributes('id'))
+  })
+
   it('renders reviewing status for auto approve review marker', () => {
     const wrapper = mount(MessageBlockToolCall, {
       props: {
@@ -153,7 +188,7 @@ describe('MessageBlockToolCall', () => {
       }
     })
 
-    await wrapper.find('div.inline-flex').trigger('click')
+    await wrapper.get('[data-testid="tool-call-trigger"]').trigger('click')
 
     const codeBlock = wrapper.findComponent({ name: 'CodeBlockNode' })
     expect(codeBlock.exists()).toBe(true)
@@ -174,7 +209,7 @@ describe('MessageBlockToolCall', () => {
       }
     })
 
-    await wrapper.find('div.inline-flex').trigger('click')
+    await wrapper.get('[data-testid="tool-call-trigger"]').trigger('click')
 
     expect(wrapper.findComponent({ name: 'CodeBlockNode' }).exists()).toBe(false)
     expect(wrapper.find('pre').text()).toContain('plain output')
@@ -205,7 +240,7 @@ describe('MessageBlockToolCall', () => {
     expect(wrapper.get('[data-testid="tool-call-image-badge"]').text()).toContain('1')
     expect(wrapper.find('[data-testid="tool-call-image-preview"]').exists()).toBe(false)
 
-    await wrapper.find('div.inline-flex').trigger('click')
+    await wrapper.get('[data-testid="tool-call-trigger"]').trigger('click')
 
     const params = wrapper.get('[data-testid="tool-call-params"]')
     const response = wrapper.get('pre')
@@ -243,7 +278,7 @@ describe('MessageBlockToolCall', () => {
       }
     })
 
-    await wrapper.find('div.inline-flex').trigger('click')
+    await wrapper.get('[data-testid="tool-call-trigger"]').trigger('click')
 
     expect(wrapper.get('[data-testid="tool-call-image-preview"] img').attributes('src')).toBe('')
   })
diff --git a/test/renderer/components/message/MessageToolbar.trace.test.ts b/test/renderer/components/message/MessageToolbar.trace.test.ts
index 0cb2ebb3b8..ac7f5f252c 100644
--- a/test/renderer/components/message/MessageToolbar.trace.test.ts
+++ b/test/renderer/components/message/MessageToolbar.trace.test.ts
@@ -30,7 +30,8 @@ vi.mock(
   () => ({
     Button: {
       name: 'Button',
-      template: '<button @click="$emit(\'click\')"><slot /></button>'
+      inheritAttrs: false,
+      template: '<button v-bind="$attrs" @click="$emit(\'click\')"><slot /></button>'
     }
   }),
   { virtual: true }
@@ -85,6 +86,19 @@ const mountToolbar = () =>
   })
 
 describe('MessageToolbar trace button visibility', () => {
+  it('reveals actions for focus-within and supports keyboard image capture', async () => {
+    const wrapper = mountToolbar()
+    const toolbar = wrapper.get('.message-toolbar')
+    const imageButton = wrapper
+      .findAll('button')
+      .find((button) => button.find('[data-icon="lucide:images"]').exists())
+
+    expect(toolbar.classes()).toContain('group-focus-within:opacity-100')
+    expect(imageButton).toBeDefined()
+    await imageButton?.trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted().copyImage).toHaveLength(1)
+  })
+
   it('shows trace button only when trace debug is enabled and message allows trace', async () => {
     traceDebugEnabled = true
     const wrapper = mountToolbar()
diff --git a/test/renderer/composables/useMessageWindow.test.ts b/test/renderer/composables/useMessageWindow.test.ts
index 8abd68bec2..b4ec7910cd 100644
--- a/test/renderer/composables/useMessageWindow.test.ts
+++ b/test/renderer/composables/useMessageWindow.test.ts
@@ -196,4 +196,19 @@ describe('useMessageWindow', () => {
     window.clearMeasurements()
     expect(window.getEntry('message-0')?.bottom).toBe(initialEstimate)
   })
+
+  it('keeps a 200-message layout bounded through a streaming row replacement', () => {
+    const messages = ref(createMessages(200))
+    const start = performance.now()
+    const window = useMessageWindow({ messages })
+
+    expect(window.entries.value).toHaveLength(200)
+    expect(window.totalHeight.value).toBeGreaterThan(0)
+
+    messages.value = [...messages.value.slice(0, 199), createStreamingAssistant()]
+
+    expect(window.entries.value).toHaveLength(200)
+    expect(window.getEntry('assistant-real-1')).toBeDefined()
+    expect(performance.now() - start).toBeLessThan(100)
+  })
 })
diff --git a/test/renderer/performance/chatRendering.perf.test.ts b/test/renderer/performance/chatRendering.perf.test.ts
index d9df623e58..2ed923f179 100644
--- a/test/renderer/performance/chatRendering.perf.test.ts
+++ b/test/renderer/performance/chatRendering.perf.test.ts
@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 import { mount } from '@vue/test-utils'
 import { generateMockMessages } from '../../fixtures/mockMessages'
 import { collectChatSearchResults } from '@/lib/chatSearch'
+import type { DisplayAssistantMessageBlock } from '@/components/chat/messageListItems'
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({ t: (key: string) => key })
@@ -38,6 +39,14 @@ vi.mock('@/composables/message/useMessageCapture', () => ({
   })
 }))
 
+vi.mock('@/stores/theme', () => ({
+  useThemeStore: () => ({ isDark: false })
+}))
+
+vi.mock('@/stores/ui/session', () => ({
+  useSessionStore: () => ({ selectSession: vi.fn() })
+}))
+
 describe('chat rendering performance smoke', () => {
   it('mounts the production MessageList path with realistic message shapes', async () => {
     const MessageList = (await import('@/components/chat/MessageList.vue')).default
@@ -60,4 +69,37 @@ describe('chat rendering performance smoke', () => {
     expect(matches.length).toBeGreaterThan(0)
     expect(new Set(matches.map((match) => match.messageId)).size).toBeGreaterThan(1)
   })
+
+  it('mounts and expands a production tool disclosure in a 160-item batch', async () => {
+    const MessageBlockToolCall = (await import('@/components/message/MessageBlockToolCall.vue'))
+      .default
+    const blocks: DisplayAssistantMessageBlock[] = Array.from({ length: 160 }, (_, index) => ({
+      type: 'tool_call',
+      status: 'success',
+      timestamp: index,
+      tool_call: {
+        id: `tool-${index}`,
+        name: 'read_file',
+        params: JSON.stringify({ path: `/tmp/file-${index}.ts` }),
+        response: `file ${index} contents`
+      }
+    }))
+    const Host = defineComponent({
+      components: { MessageBlockToolCall },
+      setup: () => ({ blocks }),
+      template:
+        '<div><MessageBlockToolCall v-for="block in blocks" :key="block.tool_call.id" :block="block" /></div>'
+    })
+
+    const start = performance.now()
+    const wrapper = mount(Host)
+    const duration = performance.now() - start
+
+    console.info(`[perf:chat-tools] 160 real tool blocks mounted in ${duration.toFixed(1)}ms`)
+    expect(wrapper.findAll('[data-testid="tool-call-trigger"]')).toHaveLength(160)
+    expect(duration).toBeLessThan(2000)
+
+    await wrapper.findAll('[data-testid="tool-call-trigger"]')[159].trigger('click')
+    expect(wrapper.findAll('[data-testid="tool-call-details"]')).toHaveLength(1)
+  })
 })

From 42bc6303ce285fc20270c9efc14e25f7b1a496fe Mon Sep 17 00:00:00 2001
From: zhangmo8 <zhangmo8@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:14:12 +0800
Subject: [PATCH 4/5] docs(ui): specify interaction performance

---
 .../renderer-interaction-performance/plan.md  | 29 +++++++++++++
 .../renderer-interaction-performance/spec.md  | 43 +++++++++++++++++++
 .../renderer-interaction-performance/tasks.md | 13 ++++++
 3 files changed, 85 insertions(+)
 create mode 100644 docs/architecture/renderer-interaction-performance/plan.md
 create mode 100644 docs/architecture/renderer-interaction-performance/spec.md
 create mode 100644 docs/architecture/renderer-interaction-performance/tasks.md

diff --git a/docs/architecture/renderer-interaction-performance/plan.md b/docs/architecture/renderer-interaction-performance/plan.md
new file mode 100644
index 0000000000..5f70347a97
--- /dev/null
+++ b/docs/architecture/renderer-interaction-performance/plan.md
@@ -0,0 +1,29 @@
+# Implementation Plan
+
+## MCP Marketplace
+
+- Add a typed batch route accepting a source and unique source IDs and returning installed IDs.
+- Resolve the batch with one configuration read in `McpPresenter`; keep the existing single-item
+  method unchanged.
+- Query only the newly returned marketplace page in the renderer, merge installed IDs into local
+  state, and track installation by server key.
+- Replace overscroll-based retry with explicit error and retry UI while retaining near-bottom
+  pagination.
+
+## Renderer Motion And Access
+
+- Commit side-panel layout width once, animate only the panel surface with transform and opacity,
+  and remove the orphaned workspace-nav width-motion CSS.
+- Convert tool-call and error disclosure triggers to buttons with `aria-expanded` and controlled
+  body IDs. Keep bodies mounted through collapse motion before unmounting expensive content.
+- Reveal message toolbars on `focus-within`, enlarge action hit areas, and keep toolbar actions visible
+  for coarse pointers.
+- Track a pending settings route around `router.push`, show a row-level spinner, and prefetch a route
+  component from pointer or keyboard focus.
+
+## Compatibility And Validation
+
+- No stored-data migration is required.
+- Extend route-dispatcher, renderer-client, and component tests around the new behavior.
+- Run formatting, generated i18n types, lint, typecheck, and focused renderer/main tests before the
+  full relevant test pass.
diff --git a/docs/architecture/renderer-interaction-performance/spec.md b/docs/architecture/renderer-interaction-performance/spec.md
new file mode 100644
index 0000000000..6282d4cf74
--- /dev/null
+++ b/docs/architecture/renderer-interaction-performance/spec.md
@@ -0,0 +1,43 @@
+# Renderer Interaction Performance
+
+## Problem
+
+Several renderer interactions still combine avoidable main-process round trips, layout-bound motion,
+or hidden controls without keyboard-visible feedback. The largest confirmed cases are the MCP Router
+marketplace, chat side panel motion, expandable message details, message toolbars, and lazy settings
+navigation.
+
+## Goal
+
+Make these existing interactions responsive and predictable without redesigning the application or
+replacing the chat rendering architecture.
+
+## Acceptance Criteria
+
+- MCP Router marketplace pages query installation state once per newly fetched batch and expose an
+  explicit retry action after load failure.
+- A marketplace item cannot start duplicate installs and communicates its pending state.
+- Opening or closing the chat side panel does not animate layout width on every frame; persisted
+  widths and drag resizing continue to work.
+- Tool-call and error details use keyboard-operable disclosure controls with synchronized height,
+  opacity, and chevron motion.
+- Message toolbar actions become visible for keyboard focus and retain a practical desktop hit area.
+- Lazy settings navigation acknowledges a click immediately and clears pending feedback on success
+  or failure.
+- Existing reduced-motion behavior applies to all new motion.
+- Focused tests cover the new contracts, pending states, keyboard semantics, and motion classes.
+
+## Constraints
+
+- Keep the Presenter, typed route contract, and renderer client boundaries for MCP operations.
+- Preserve the existing single-server installation query for compatibility.
+- Preserve chat message windowing, scroll ownership, side-panel width persistence, and manual resize.
+- Use existing motion tokens and visual components; add no new UI dependency.
+- Keep all user-facing text in vue-i18n.
+
+## Non-Goals
+
+- Rewriting the chat renderer, message windowing, or Markdown renderer.
+- Broadly splitting large renderer components without runtime profiling evidence.
+- Removing all backdrop blur or changing the product's visual direction.
+- Adding telemetry, a benchmark service, or a GitHub issue.
diff --git a/docs/architecture/renderer-interaction-performance/tasks.md b/docs/architecture/renderer-interaction-performance/tasks.md
new file mode 100644
index 0000000000..1a00f4d5aa
--- /dev/null
+++ b/docs/architecture/renderer-interaction-performance/tasks.md
@@ -0,0 +1,13 @@
+# Tasks
+
+- [x] Add MCP batch installation-status contract, Presenter method, route dispatch, client method,
+      and contract tests.
+- [x] Make MCP marketplace pagination incremental with pending install and explicit retry states.
+- [x] Replace side-panel width motion with one-step layout commits and remove orphaned width-motion
+      CSS.
+- [x] Make message disclosures and toolbar actions keyboard-visible and motion-consistent.
+- [x] Add pending feedback and prefetch behavior to lazy settings navigation.
+- [x] Fix the settings window class typo and close-button accessible label.
+- [x] Add regression tests for contracts, pagination, pending states, semantics, and motion.
+- [x] Run format, i18n, lint, typecheck, and tests.
+- [x] Commit, push, and open a PR against `dev`.

From d845603f9e8d590fc4775ff8d40a99a2f9d8adaf Mon Sep 17 00:00:00 2001
From: zhangmo8 <zhangmo8@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:46:55 +0800
Subject: [PATCH 5/5] feat(ui): complete capture keyboard access

---
 .../src/components/message/MessageToolbar.vue | 74 +++++++++----------
 .../message/MessageToolbar.trace.test.ts      | 16 +++-
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/renderer/src/components/message/MessageToolbar.vue b/src/renderer/src/components/message/MessageToolbar.vue
index 4f3e2e2325..c7f5131b52 100644
--- a/src/renderer/src/components/message/MessageToolbar.vue
+++ b/src/renderer/src/components/message/MessageToolbar.vue
@@ -89,7 +89,7 @@
                 <Button
                   variant="ghost"
                   size="icon"
-                  class="w-4 h-4 text-muted-foreground hover:text-primary hover:bg-transparent transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
+                  class="relative w-4 h-4 text-muted-foreground hover:text-primary hover:bg-transparent transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
                   @click="handleCopy"
                 >
                   <Icon icon="lucide:copy" class="w-3 h-3" />
@@ -109,13 +109,13 @@
                   v-show="isAssistant"
                   variant="ghost"
                   size="icon"
-                  class="w-4 h-4 text-muted-foreground hover:text-primary hover:bg-transparent transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
+                  class="relative w-4 h-4 text-muted-foreground hover:text-primary hover:bg-transparent transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
                   :disabled="isCapturingImage"
+                  aria-keyshortcuts="Enter Space Shift+Enter Shift+Space"
                   @mousedown="handleCopyImageStart"
                   @mouseup="handleCopyImageEnd"
                   @mouseleave="handleCopyImageCancel"
-                  @keydown.enter.prevent="handleCopyImageKeyboard"
-                  @keydown.space.prevent="handleCopyImageKeyboard"
+                  @keydown="handleCopyImageKeyboard"
                 >
                   <Icon v-if="isCapturingImage" icon="lucide:loader" class="w-3 h-3 animate-spin" />
                   <Icon v-else icon="lucide:images" class="w-3 h-3" />
@@ -240,7 +240,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { Button } from '@shadcn/components/ui/button'
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref, type Ref } from 'vue'
 import {
   Tooltip,
   TooltipContent,
@@ -260,31 +260,35 @@ const showCopyImageTip = ref(false)
 const showCopyFromTopTip = ref(false)
 
 let copyImagePressTimer: number | null = null
-let copyTipTimer: number | null = null
-let copyImageTipTimer: number | null = null
-let copyFromTopTipTimer: number | null = null
+type TipTimerKey = 'copy' | 'copyImage' | 'copyFromTop'
+const tipTimers: Record<TipTimerKey, number | null> = {
+  copy: null,
+  copyImage: null,
+  copyFromTop: null
+}
 const LONG_PRESS_DURATION = 800 // 长按时间阈值（毫秒）
+const TIP_DURATION = 2000
+
+const flashTip = (tip: Ref<boolean>, timerKey: TipTimerKey) => {
+  tip.value = true
+  const activeTimer = tipTimers[timerKey]
+  if (activeTimer !== null) window.clearTimeout(activeTimer)
+  tipTimers[timerKey] = window.setTimeout(() => {
+    tip.value = false
+    tipTimers[timerKey] = null
+  }, TIP_DURATION)
+}
 
 const handleCopy = () => {
   emit('copy')
-  showCopyTip.value = true
-  if (copyTipTimer !== null) window.clearTimeout(copyTipTimer)
-  copyTipTimer = window.setTimeout(() => {
-    showCopyTip.value = false
-    copyTipTimer = null
-  }, 2000)
+  flashTip(showCopyTip, 'copy')
 }
 
 const handleCopyImageStart = () => {
   copyImagePressTimer = window.setTimeout(() => {
     // 长按触发：从顶部开始截图
     emit('copyImageFromTop')
-    showCopyFromTopTip.value = true
-    if (copyFromTopTipTimer !== null) window.clearTimeout(copyFromTopTipTimer)
-    copyFromTopTipTimer = window.setTimeout(() => {
-      showCopyFromTopTip.value = false
-      copyFromTopTipTimer = null
-    }, 2000)
+    flashTip(showCopyFromTopTip, 'copyFromTop')
     copyImagePressTimer = null
   }, LONG_PRESS_DURATION)
 }
@@ -295,24 +299,22 @@ const handleCopyImageEnd = () => {
     window.clearTimeout(copyImagePressTimer)
     copyImagePressTimer = null
     emit('copyImage')
-    showCopyImageTip.value = true
-    if (copyImageTipTimer !== null) window.clearTimeout(copyImageTipTimer)
-    copyImageTipTimer = window.setTimeout(() => {
-      showCopyImageTip.value = false
-      copyImageTipTimer = null
-    }, 2000)
+    flashTip(showCopyImageTip, 'copyImage')
   }
 }
 
 const handleCopyImageKeyboard = (event: KeyboardEvent) => {
-  if (event.repeat || props.isCapturingImage) return
+  if (!['Enter', ' '].includes(event.key) || event.repeat || props.isCapturingImage) return
+
+  event.preventDefault()
+  if (event.shiftKey) {
+    emit('copyImageFromTop')
+    flashTip(showCopyFromTopTip, 'copyFromTop')
+    return
+  }
+
   emit('copyImage')
-  showCopyImageTip.value = true
-  if (copyImageTipTimer !== null) window.clearTimeout(copyImageTipTimer)
-  copyImageTipTimer = window.setTimeout(() => {
-    showCopyImageTip.value = false
-    copyImageTipTimer = null
-  }, 2000)
+  flashTip(showCopyImageTip, 'copyImage')
 }
 
 const handleCopyImageCancel = () => {
@@ -366,7 +368,7 @@ const allowMemory = computed(() => props.showMemory ?? false)
 const isReadOnly = computed(() => props.isReadOnly === true)
 
 onBeforeUnmount(() => {
-  for (const timer of [copyImagePressTimer, copyTipTimer, copyImageTipTimer, copyFromTopTipTimer]) {
+  for (const timer of [copyImagePressTimer, ...Object.values(tipTimers)]) {
     if (timer !== null) window.clearTimeout(timer)
   }
 })
@@ -378,10 +380,6 @@ onBeforeUnmount(() => {
   min-height: 1.75rem;
 }
 
-.relative {
-  position: relative;
-}
-
 @media (hover: none), (pointer: coarse) {
   .message-toolbar {
     opacity: 1;
diff --git a/test/renderer/components/message/MessageToolbar.trace.test.ts b/test/renderer/components/message/MessageToolbar.trace.test.ts
index ac7f5f252c..b6c775cccc 100644
--- a/test/renderer/components/message/MessageToolbar.trace.test.ts
+++ b/test/renderer/components/message/MessageToolbar.trace.test.ts
@@ -86,17 +86,29 @@ const mountToolbar = () =>
   })
 
 describe('MessageToolbar trace button visibility', () => {
-  it('reveals actions for focus-within and supports keyboard image capture', async () => {
+  it('reveals actions for focus-within and supports both keyboard image capture variants', async () => {
     const wrapper = mountToolbar()
     const toolbar = wrapper.get('.message-toolbar')
+    const copyButton = wrapper
+      .findAll('button')
+      .find((button) => button.find('[data-icon="lucide:copy"]').exists())
     const imageButton = wrapper
       .findAll('button')
       .find((button) => button.find('[data-icon="lucide:images"]').exists())
 
     expect(toolbar.classes()).toContain('group-focus-within:opacity-100')
+    expect(copyButton?.classes()).toContain('relative')
     expect(imageButton).toBeDefined()
+    expect(imageButton?.classes()).toContain('relative')
+    expect(imageButton?.attributes('aria-keyshortcuts')).toBe('Enter Space Shift+Enter Shift+Space')
+
     await imageButton?.trigger('keydown', { key: 'Enter' })
-    expect(wrapper.emitted().copyImage).toHaveLength(1)
+    await imageButton?.trigger('keydown', { key: ' ' })
+    await imageButton?.trigger('keydown', { key: 'Enter', shiftKey: true })
+    await imageButton?.trigger('keydown', { key: ' ', shiftKey: true })
+
+    expect(wrapper.emitted().copyImage).toHaveLength(2)
+    expect(wrapper.emitted().copyImageFromTop).toHaveLength(2)
   })
 
   it('shows trace button only when trace debug is enabled and message allows trace', async () => {