From 7ffc7a792002080532d44aa29c25eade7b112bf2 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 22 Jan 2026 11:40:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(web/config):=20=E9=87=8D=E6=9E=84=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E4=BE=A7=E8=BE=B9=E6=A0=8F=E4=B8=BA=E9=80=9A=E7=94=A8?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构 AgentConfigSidebar 组件，将工具选择逻辑抽象为通用选择组件
- 支持显示选项名称和描述
- 根据选项数量自动切换显示模式（卡片列表或弹窗）
- 统一处理工具、知识库等多选配置项
- 优化样式和交互体验
---
 src/agents/chatbot/graph.py                   |   4 +-
 src/agents/common/context.py                  |   4 +-
 .../middlewares/runtime_config_middleware.py  |   5 +-
 src/agents/deep_agent/graph.py                |   7 +-
 src/agents/reporter/graph.py                  |   1 -
 src/services/chat_stream_service.py           |   8 +-
 web/src/components/AgentConfigSidebar.vue     | 388 +++++++++++-------
 7 files changed, 248 insertions(+), 169 deletions(-)

diff --git a/src/agents/chatbot/graph.py b/src/agents/chatbot/graph.py
index 05184a0b..691b1b9c 100644
--- a/src/agents/chatbot/graph.py
+++ b/src/agents/chatbot/graph.py
@@ -20,7 +20,9 @@ class ChatbotAgent(BaseAgent):
     async def get_graph(self, **kwargs):
         """构建图"""
         context = self.context_schema()
-        all_mcp_tools = await get_tools_from_all_servers()  # 因为异步加载，无法放在 RuntimeConfigMiddleware 的 __init__ 中
+        all_mcp_tools = (
+            await get_tools_from_all_servers()
+        )  # 因为异步加载，无法放在 RuntimeConfigMiddleware 的 __init__ 中
 
         # 使用 create_agent 创建智能体
         # 注意：tools 参数由 RuntimeConfigMiddleware 在 wrap_model_call 中动态设置
diff --git a/src/agents/common/context.py b/src/agents/common/context.py
index 5d9b09d9..a193a407 100644
--- a/src/agents/common/context.py
+++ b/src/agents/common/context.py
@@ -75,7 +75,9 @@ class BaseContext:
         default_factory=list,
         metadata={
             "name": "知识库",
-            "options": lambda: [k["name"] for k in knowledge_base.get_retrievers().values()],
+            "options": lambda: [
+                {"name": k["name"], "description": k["description"]} for k in knowledge_base.get_retrievers().values()
+            ],
             "description": "知识库列表，可以在左侧知识库页面中创建知识库。",
             "type": "list",  # Explicitly mark as list type for frontend if needed
         },
diff --git a/src/agents/common/middlewares/runtime_config_middleware.py b/src/agents/common/middlewares/runtime_config_middleware.py
index 08dcf493..051ecebc 100644
--- a/src/agents/common/middlewares/runtime_config_middleware.py
+++ b/src/agents/common/middlewares/runtime_config_middleware.py
@@ -5,10 +5,10 @@ from typing import Any
 
 from langchain.agents.middleware import AgentMiddleware, ModelRequest, ModelResponse
 
-from src.utils.logging_config import logger
 from src.agents.common import load_chat_model
-from src.agents.common.tools import get_kb_based_tools, get_buildin_tools
+from src.agents.common.tools import get_kb_based_tools
 from src.services.mcp_service import get_enabled_mcp_tools
+from src.utils.logging_config import logger
 
 
 def _is_system_message(msg: Any) -> bool:
@@ -82,7 +82,6 @@ class RuntimeConfigMiddleware(AgentMiddleware):
         request = request.override(model=model, tools=enabled_tools, messages=messages)
         return await handler(request)
 
-
     async def get_tools_from_context(self, context) -> list:
         """从上下文配置中获取工具列表"""
         # 1. 基础工具 (从 context.tools 中筛选)
diff --git a/src/agents/deep_agent/graph.py b/src/agents/deep_agent/graph.py
index 5aef2922..460e7952 100644
--- a/src/agents/deep_agent/graph.py
+++ b/src/agents/deep_agent/graph.py
@@ -4,7 +4,12 @@ from deepagents.middleware.filesystem import FilesystemMiddleware
 from deepagents.middleware.patch_tool_calls import PatchToolCallsMiddleware
 from deepagents.middleware.subagents import SubAgentMiddleware
 from langchain.agents import create_agent
-from langchain.agents.middleware import ModelRequest, ModelRetryMiddleware, SummarizationMiddleware, TodoListMiddleware, dynamic_prompt
+from langchain.agents.middleware import (
+    ModelRequest,
+    SummarizationMiddleware,
+    TodoListMiddleware,
+    dynamic_prompt,
+)
 
 from src.agents.common import BaseAgent, load_chat_model
 from src.agents.common.middlewares import RuntimeConfigMiddleware, inject_attachment_context
diff --git a/src/agents/reporter/graph.py b/src/agents/reporter/graph.py
index 447254a3..2d25e820 100644
--- a/src/agents/reporter/graph.py
+++ b/src/agents/reporter/graph.py
@@ -2,7 +2,6 @@ from dataclasses import dataclass, field
 from typing import Annotated
 
 from langchain.agents import create_agent
-from langchain.agents.middleware import ModelRetryMiddleware
 
 from src.agents.common import BaseAgent, BaseContext, load_chat_model
 from src.agents.common.middlewares import (
diff --git a/src/services/chat_stream_service.py b/src/services/chat_stream_service.py
index da693746..11e27c12 100644
--- a/src/services/chat_stream_service.py
+++ b/src/services/chat_stream_service.py
@@ -7,7 +7,8 @@ from collections.abc import AsyncIterator
 from langchain.messages import AIMessage, AIMessageChunk, HumanMessage
 from langgraph.types import Command
 
-from src import config as conf, knowledge_base
+from src import config as conf
+from src import knowledge_base
 from src.agents import agent_manager
 from src.plugins.guard import content_guard
 from src.repositories.agent_config_repository import AgentConfigRepository
@@ -307,7 +308,6 @@ async def stream_agent_chat(
         "agent_config": agent_config,
     }
 
-
     try:
         conv_repo = ConversationRepository(db)
 
@@ -347,9 +347,7 @@ async def stream_agent_chat(
             filtered_knowledge_names = [kb for kb in requested_knowledge_names if kb in accessible_kb_names]
             blocked_knowledge_names = [kb for kb in requested_knowledge_names if kb not in accessible_kb_names]
             if blocked_knowledge_names:
-                logger.warning(
-                    f"用户 {user_id} 无权访问知识库: {blocked_knowledge_names}, 已自动过滤"
-                )
+                logger.warning(f"用户 {user_id} 无权访问知识库: {blocked_knowledge_names}, 已自动过滤")
             input_context["agent_config"]["knowledges"] = filtered_knowledge_names
 
         full_msg = None
diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue
index 1bb5fd2d..67adfea0 100644
--- a/web/src/components/AgentConfigSidebar.vue
+++ b/web/src/components/AgentConfigSidebar.vue
@@ -57,7 +57,10 @@
                 </div>
 
                 <!-- 系统提示词 -->
-                <div v-else-if="value.template_metadata.kind === 'prompt'" class="system-prompt-container">
+                <div
+                  v-else-if="value.template_metadata.kind === 'prompt'"
+                  class="system-prompt-container"
+                >
                   <!-- 编辑模式 -->
                   <a-textarea
                     v-if="systemPromptEditMode"
@@ -139,43 +142,89 @@
                   </a-select-option>
                 </a-select>
 
-                <!-- 多选 -->
-                <div
-                  v-else-if="value?.options.length > 0 && value?.type === 'list'"
-                  class="multi-select-cards"
-                >
-                  <div class="multi-select-label">
-                    <span>已选择 {{ getSelectedCount(key) }} 项</span>
-                    <a-button
-                      type="link"
-                      size="small"
-                      class="clear-btn"
-                      @click="clearSelection(key)"
-                      v-if="getSelectedCount(key) > 0"
-                    >
-                      清空
-                    </a-button>
-                  </div>
-                  <div class="options-grid">
-                    <div
-                      v-for="option in value.options"
-                      :key="option"
-                      class="option-card"
-                      :class="{
-                        selected: isOptionSelected(key, option),
-                        unselected: !isOptionSelected(key, option)
-                      }"
-                      @click="toggleOption(key, option)"
-                    >
-                      <div class="option-content">
-                        <span class="option-text">{{ option }}</span>
-                        <div class="option-indicator">
-                          <Check v-if="isOptionSelected(key, option)" :size="16" />
-                          <Plus v-else :size="16" />
+                <!-- 多选 / 工具列表 (统一处理) -->
+                <div v-else-if="isListConfig(key, value)" class="list-config-container">
+                  <!-- Case 1: <= 5 options, inline list -->
+                  <div v-if="getConfigOptions(value).length <= 5" class="multi-select-cards">
+                    <div class="multi-select-label">
+                      <span>已选择 {{ getSelectedCount(key) }} 项</span>
+                      <a-button
+                        type="link"
+                        size="small"
+                        class="clear-btn"
+                        @click="clearSelection(key)"
+                        v-if="getSelectedCount(key) > 0"
+                      >
+                        清空
+                      </a-button>
+                    </div>
+                    <div class="options-grid">
+                      <div
+                        v-for="option in getConfigOptions(value)"
+                        :key="getOptionValue(option)"
+                        class="option-card"
+                        :class="{
+                          selected: isOptionSelected(key, getOptionValue(option)),
+                          unselected: !isOptionSelected(key, getOptionValue(option))
+                        }"
+                        @click="toggleOption(key, getOptionValue(option))"
+                      >
+                        <div class="option-content">
+                          <span class="option-text">{{ getOptionLabel(option) }}</span>
+                          <div class="option-indicator">
+                            <Check
+                              v-if="isOptionSelected(key, getOptionValue(option))"
+                              :size="16"
+                            />
+                            <Plus v-else :size="16" />
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
+
+                  <!-- Case 2: > 5 options, Modal trigger -->
+
+                  <div v-else class="selection-container">
+                    <div class="selection-summary">
+                      <div class="selection-summary-info">
+                        <span class="selection-count">已选择 {{ getSelectedCount(key) }} 项</span>
+
+                        <a-button
+                          type="link"
+                          size="small"
+                          class="clear-btn"
+                          @click="clearSelection(key)"
+                          v-if="getSelectedCount(key) > 0"
+                        >
+                          清空
+                        </a-button>
+                      </div>
+
+                      <a-button
+                        type="primary"
+                        size="small"
+                        class="selection-trigger-btn"
+                        @click="openSelectionModal(key)"
+                      >
+                        选择...
+                      </a-button>
+                    </div>
+
+                    <!-- Selected Preview Tags -->
+
+                    <div v-if="getSelectedCount(key) > 0" class="selection-preview">
+                      <a-tag
+                        v-for="val in agentConfig[key]"
+                        :key="val"
+                        closable
+                        @close="toggleOption(key, val)"
+                        class="selection-tag"
+                      >
+                        {{ getOptionLabelFromValue(key, val) }}
+                      </a-tag>
+                    </div>
+                  </div>
                 </div>
 
                 <!-- 数字 -->
@@ -251,20 +300,21 @@
       </div>
     </div>
 
-    <!-- 工具选择弹窗 -->
+    <!-- 通用选择弹窗 -->
+
     <a-modal
-      v-model:open="toolsModalOpen"
-      title="选择工具"
+      v-model:open="selectionModalOpen"
+      :title="`选择${configurableItems[currentConfigKey]?.name || '项目'}`"
       :width="800"
       :footer="null"
       :maskClosable="false"
-      class="tools-modal"
+      class="selection-modal"
     >
-      <div class="tools-modal-content">
-        <div class="tools-search">
+      <div class="selection-modal-content">
+        <div class="selection-search">
           <a-input
-            v-model:value="toolsSearchText"
-            placeholder="搜索工具..."
+            v-model:value="selectionSearchText"
+            placeholder="搜索..."
             allow-clear
             class="search-input"
           >
@@ -274,32 +324,39 @@
           </a-input>
         </div>
 
-        <div class="tools-list">
+        <div class="selection-list">
           <div
-            v-for="tool in filteredTools"
-            :key="tool.id"
-            class="tool-item"
-            :class="{ selected: selectedTools.includes(tool.id) }"
-            @click="toggleToolSelection(tool.id)"
+            v-for="option in filteredOptions"
+            :key="getOptionValue(option)"
+            class="selection-item"
+            :class="{ selected: tempSelectedValues.includes(getOptionValue(option)) }"
+            @click="toggleModalSelection(getOptionValue(option))"
           >
-            <div class="tool-content">
-              <div class="tool-header">
-                <span class="tool-name">{{ tool.name }}</span>
-                <div class="tool-indicator">
-                  <Check v-if="selectedTools.includes(tool.id)" :size="16" />
+            <div class="selection-item-content">
+              <div class="selection-item-header">
+                <span class="selection-item-name">{{ getOptionLabel(option) }}</span>
+
+                <div class="selection-item-indicator">
+                  <Check v-if="tempSelectedValues.includes(getOptionValue(option))" :size="16" />
+
                   <Plus v-else :size="16" />
                 </div>
               </div>
-              <div class="tool-description">{{ tool.description }}</div>
+
+              <div v-if="getOptionDescription(option)" class="selection-item-description">
+                {{ getOptionDescription(option) }}
+              </div>
             </div>
           </div>
         </div>
 
-        <div class="tools-modal-footer">
-          <div class="selected-count">已选择 {{ selectedTools.length }} 个工具</div>
+        <div class="selection-modal-footer">
+          <div class="selected-count">已选择 {{ tempSelectedValues.length }} 项</div>
+
           <div class="modal-actions">
-            <a-button @click="cancelToolsSelection">取消</a-button>
-            <a-button type="primary" @click="confirmToolsSelection">确认</a-button>
+            <a-button @click="closeSelectionModal">取消</a-button>
+
+            <a-button type="primary" @click="confirmSelection">确认</a-button>
           </div>
         </div>
       </div>
@@ -308,16 +365,16 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import { X, Save, Trash2, Check, Plus, Search, Star } from 'lucide-vue-next'
+import { X, Trash2, Check, Plus, Search, Star } from 'lucide-vue-next'
 import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue'
 import { useAgentStore } from '@/stores/agent'
 import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
 
 // Props
-const props = defineProps({
+defineProps({
   isOpen: {
     type: Boolean,
     default: false
@@ -348,9 +405,10 @@ const {
 // console.log(availableTools.value)
 
 // 本地状态
-const toolsModalOpen = ref(false)
-const selectedTools = ref([])
-const toolsSearchText = ref('')
+const selectionModalOpen = ref(false)
+const currentConfigKey = ref(null)
+const tempSelectedValues = ref([])
+const selectionSearchText = ref('')
 const systemPromptEditMode = ref(false)
 const activeTab = ref('basic')
 
@@ -367,8 +425,9 @@ const isDeletingConfig = ref(false)
 
 const hasOtherConfigs = computed(() => {
   if (isEmptyConfig.value) return false
-  return Object.entries(configurableItems.value).some(([key, value]) => {
-    const isBasic = value.template_metadata?.kind === 'prompt' || value.template_metadata?.kind === 'llm'
+  return Object.entries(configurableItems.value).some(([, value]) => {
+    const isBasic =
+      value.template_metadata?.kind === 'prompt' || value.template_metadata?.kind === 'llm'
     const isTools =
       value.template_metadata?.kind === 'mcps' ||
       value.template_metadata?.kind === 'knowledges' ||
@@ -391,22 +450,61 @@ const segmentedOptions = computed(() => {
   return options
 })
 
-const filteredTools = computed(() => {
-  const toolsList = availableTools.value ? Object.values(availableTools.value) : []
-  if (!toolsSearchText.value) {
-    return toolsList
+// 通用选项获取与处理
+const getConfigOptions = (value) => {
+  if (value?.template_metadata?.kind === 'tools') {
+    return availableTools.value ? Object.values(availableTools.value) : []
   }
-  const searchLower = toolsSearchText.value.toLowerCase()
-  return toolsList.filter(
-    (tool) =>
-      tool.name.toLowerCase().includes(searchLower) ||
-      tool.description.toLowerCase().includes(searchLower)
-  )
+  return value?.options || []
+}
+
+const isListConfig = (key, value) => {
+  const isTools = value?.template_metadata?.kind === 'tools'
+  const isList = value?.type === 'list'
+  return isTools || isList
+}
+
+const getOptionValue = (option) => {
+  if (typeof option === 'object' && option !== null) {
+    return option.id || option.value || option.name
+  }
+  return option
+}
+
+const getOptionLabel = (option) => {
+  if (typeof option === 'object' && option !== null) {
+    return option.name || option.label || option.id
+  }
+  return option
+}
+
+const getOptionDescription = (option) => {
+  if (typeof option === 'object' && option !== null) {
+    return option.description || '暂无描述'
+  }
+  return null
+}
+
+const filteredOptions = computed(() => {
+  if (!currentConfigKey.value) return []
+  const key = currentConfigKey.value
+  const configItem = configurableItems.value[key]
+  const options = getConfigOptions(configItem)
+
+  if (!selectionSearchText.value) return options
+
+  const search = selectionSearchText.value.toLowerCase()
+  return options.filter((opt) => {
+    const label = String(getOptionLabel(opt)).toLowerCase()
+    const desc = String(getOptionDescription(opt) || '').toLowerCase()
+    return label.includes(search) || desc.includes(search)
+  })
 })
 
 // 方法
 const shouldShowConfig = (key, value) => {
-  const isBasic = value.template_metadata?.kind === 'prompt' || value.template_metadata?.kind === 'llm'
+  const isBasic =
+    value.template_metadata?.kind === 'prompt' || value.template_metadata?.kind === 'llm'
   const isTools =
     value.template_metadata?.kind === 'mcps' ||
     value.template_metadata?.kind === 'knowledges' ||
@@ -488,60 +586,51 @@ const clearSelection = (key) => {
   })
 }
 
-// 工具相关方法
-const getToolNameById = (toolId) => {
-  const toolsList = availableTools.value ? Object.values(availableTools.value) : []
-  const tool = toolsList.find((t) => t.id === toolId)
-  return tool ? tool.name : toolId
+// 统一选择弹窗相关方法
+const getOptionLabelFromValue = (key, val) => {
+  const options = getConfigOptions(configurableItems.value[key])
+  const option = options.find((opt) => getOptionValue(opt) === val)
+  return option ? getOptionLabel(option) : val
 }
 
-const openToolsModal = async () => {
-  console.log('availableTools.value', availableTools.value)
-  try {
-    // 强制刷新智能体详情以获取最新工具列表
-    if (selectedAgentId.value) {
+const openSelectionModal = async (key) => {
+  currentConfigKey.value = key
+  // 如果是工具，可能需要刷新
+  if (configurableItems.value[key]?.template_metadata?.kind === 'tools' && selectedAgentId.value) {
+    try {
       await agentStore.fetchAgentDetail(selectedAgentId.value, true)
+    } catch (error) {
+      console.error('刷新工具列表失败:', error)
     }
-    selectedTools.value = [...(agentConfig.value?.tools || [])]
-    toolsModalOpen.value = true
-  } catch (error) {
-    console.error('打开工具选择弹窗失败:', error)
-    message.error('打开工具选择弹窗失败')
   }
+  const currentValues = agentConfig.value[key] || []
+  tempSelectedValues.value = [...currentValues]
+  selectionModalOpen.value = true
 }
 
-const toggleToolSelection = (toolId) => {
-  const index = selectedTools.value.indexOf(toolId)
+const toggleModalSelection = (optionValue) => {
+  const index = tempSelectedValues.value.indexOf(optionValue)
   if (index > -1) {
-    selectedTools.value.splice(index, 1)
+    tempSelectedValues.value.splice(index, 1)
   } else {
-    selectedTools.value.push(toolId)
+    tempSelectedValues.value.push(optionValue)
   }
 }
 
-const removeSelectedTool = (toolId) => {
-  const currentTools = [...(agentConfig.value?.tools || [])]
-  const index = currentTools.indexOf(toolId)
-  if (index > -1) {
-    currentTools.splice(index, 1)
+const confirmSelection = () => {
+  if (currentConfigKey.value) {
     agentStore.updateAgentConfig({
-      tools: currentTools
+      [currentConfigKey.value]: [...tempSelectedValues.value]
     })
   }
+  closeSelectionModal()
 }
 
-const confirmToolsSelection = () => {
-  agentStore.updateAgentConfig({
-    tools: [...selectedTools.value]
-  })
-  toolsModalOpen.value = false
-  toolsSearchText.value = ''
-}
-
-const cancelToolsSelection = () => {
-  toolsModalOpen.value = false
-  toolsSearchText.value = ''
-  selectedTools.value = []
+const closeSelectionModal = () => {
+  selectionModalOpen.value = false
+  currentConfigKey.value = null
+  tempSelectedValues.value = []
+  selectionSearchText.value = ''
 }
 
 // 系统提示词编辑相关方法
@@ -663,21 +752,6 @@ const confirmDeleteConfig = async () => {
     }
   })
 }
-
-const resetConfig = async () => {
-  if (!selectedAgentId.value) {
-    message.error('没有选择智能体')
-    return
-  }
-
-  try {
-    agentStore.resetAgentConfig()
-    message.info('配置已重置')
-  } catch (error) {
-    console.error('重置配置出错:', error)
-    message.error('重置配置失败')
-  }
-}
 </script>
 
 <style lang="less" scoped>
@@ -939,9 +1013,9 @@ const resetConfig = async () => {
   }
 }
 
-// 工具选择器样式
-.tools-selector {
-  .tools-summary {
+// 选择器样式
+.selection-container {
+  .selection-summary {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -951,20 +1025,20 @@ const resetConfig = async () => {
     border: 1px solid var(--gray-200);
     margin-bottom: 8px;
 
-    .tools-summary-info {
+    .selection-summary-info {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: var(--gray-900);
 
-      .tools-count {
+      .selection-count {
         color: var(--gray-900);
         font-weight: 500;
       }
     }
 
-    .select-tools-btn {
+    .selection-trigger-btn {
       background: var(--main-color);
       border: none;
       border-radius: 4px;
@@ -979,15 +1053,15 @@ const resetConfig = async () => {
     }
   }
 
-  .selected-tools-preview {
+  .selection-preview {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 
-    .tool-tag {
+    .selection-tag {
       margin: 0;
       padding: 4px 8px;
-      border-radius: 12px;
+      border-radius: 8px;
       background: var(--gray-50);
       border: 1px solid var(--gray-200);
       color: var(--gray-900);
@@ -1078,10 +1152,10 @@ const resetConfig = async () => {
   }
 }
 
-// 工具选择弹窗样式
-.tools-modal {
-  .tools-modal-content {
-    .tools-search {
+// 选择弹窗样式
+.selection-modal {
+  .selection-modal-content {
+    .selection-search {
       margin-bottom: 16px;
 
       .search-input {
@@ -1112,7 +1186,7 @@ const resetConfig = async () => {
       }
     }
 
-    .tools-list {
+    .selection-list {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
       gap: 12px;
@@ -1144,7 +1218,7 @@ const resetConfig = async () => {
         background: var(--gray-500);
       }
 
-      .tool-item {
+      .selection-item {
         padding: 12px 16px;
         border-bottom: none;
         cursor: pointer;
@@ -1158,14 +1232,13 @@ const resetConfig = async () => {
           border-color: var(--gray-300);
           background: var(--gray-20);
         }
-        .tool-content {
-          .tool-header {
+        .selection-item-content {
+          .selection-item-header {
             display: flex;
             align-items: center;
-            margin-bottom: 6px;
             gap: 8px;
 
-            .tool-name {
+            .selection-item-name {
               font-size: 14px;
               font-weight: 500;
               color: var(--gray-900);
@@ -1173,7 +1246,7 @@ const resetConfig = async () => {
               flex: 1;
             }
 
-            .tool-indicator {
+            .selection-item-indicator {
               color: var(--gray-400);
               font-size: 16px;
               transition: all 0.2s ease;
@@ -1181,10 +1254,11 @@ const resetConfig = async () => {
             }
           }
 
-          .tool-description {
+          .selection-item-description {
             font-size: 12px;
             color: var(--gray-600);
             line-height: 1.4;
+            margin-top: 6px;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
@@ -1194,25 +1268,25 @@ const resetConfig = async () => {
         }
 
         &.selected {
-          background: var(--main-50);
-          border-color: var(--main-200);
+          background: var(--main-10);
+          border-color: var(--main-color);
 
-          .tool-content {
-            .tool-name {
+          .selection-item-content {
+            .selection-item-name {
               color: var(--main-800);
             }
-            .tool-indicator {
+            .selection-item-indicator {
               color: var(--main-800);
             }
           }
-          .tool-description {
+          .selection-item-description {
             color: var(--gray-900);
           }
         }
       }
     }
 
-    .tools-modal-footer {
+    .selection-modal-footer {
       display: flex;
       justify-content: space-between;
       align-items: center;