diff --git a/ui/src/conversation-panel/components/content/items/failure.vue b/ui/src/conversation-panel/components/content/items/failure.vue
index d5b5b87c7f9..aac779b9a9c 100644
--- a/ui/src/conversation-panel/components/content/items/failure.vue
+++ b/ui/src/conversation-panel/components/content/items/failure.vue
@@ -1,34 +1,16 @@
-<template>
-  <div class="content-failure">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM8 4v4M8 10.5h.006" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
-    </svg>
-    <span>{{ content.content || '发生错误' }}</span>
-  </div>
-</template>
-
 <script setup lang="ts">
+defineOptions({ name: 'ConversationFailureContent' })
+
 defineProps<{
-  content: any
+  content: { content?: string | null }
 }>()
 </script>
 
-<style scoped lang="scss">
-.content-failure {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 12px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: 8px;
-  color: #ef4444;
-  font-size: 13px;
-  line-height: 1.5;
-}
+<template>
+  <div class="flex-align-center gap-2">
+    <MkIcon name="icon_warning_filled" class="text-danger!" />
+    <span>{{ content.content || '发生错误' }}</span>
+  </div>
+</template>
 
-.content-failure svg {
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/ui/src/conversation-panel/components/content/items/form.vue b/ui/src/conversation-panel/components/content/items/form.vue
index 3876bd7d0b2..569a3dda552 100644
--- a/ui/src/conversation-panel/components/content/items/form.vue
+++ b/ui/src/conversation-panel/components/content/items/form.vue
@@ -59,8 +59,8 @@ const submit = async () => {
 </script>
 
 <template>
-  <MdPreview class="!h-auto" editorId="conversation-text" :modelValue="leadingText || ''"></MdPreview>
   <div class="mk-gray-card-lg space-y-4 border border-N300">
+    <MdPreview class="!h-auto" editorId="conversation-text" :modelValue="leadingText || ''"></MdPreview>
     <MkDynamicsForm ref="dynamicsFormRef" :view="is_submit || !mainStore" :render-data="form_field_list" v-model="form_data" />
     <MdPreview class="!h-auto" editorId="conversation-text" :modelValue="trailingText || ''"></MdPreview>
     <el-button :type="is_submit ? 'info' : 'primary'" :disabled="is_submit || !mainStore" @click="submit">
diff --git a/ui/src/conversation-panel/components/content/items/group-tool/components/ToolItem.vue b/ui/src/conversation-panel/components/content/items/group-tool/components/ToolItem.vue
index 171b67619f7..4d7e267ec04 100644
--- a/ui/src/conversation-panel/components/content/items/group-tool/components/ToolItem.vue
+++ b/ui/src/conversation-panel/components/content/items/group-tool/components/ToolItem.vue
@@ -29,6 +29,8 @@ const statusType = computed(() => {
   return 'info'
 })
 
+const isFailed = computed(() => props.toolItem.status === 'FAIL' || props.toolItem.status === 'FAILURE')
+
 // 参数为 JSON 字符串，尝试格式化展示，失败则原样展示
 function tryFormatJson(value: unknown): string {
   if (value == null) return ''
@@ -65,7 +67,7 @@ const formattedResult = computed(() => tryFormatJson(props.toolItem.content))
       <span v-if="loading" class="mk-conversation-loading" />
       <MkIcon name="icon_busy_outlined" />
       <span class="min-w-0 max-w-[300px] truncate" :title="toolTitle">{{ toolTitle }}</span>
-      <el-tag v-if="toolItem.status" size="small" :type="statusType">{{ statusText }}</el-tag>
+      <el-tag v-if="isFailed" size="small" :type="statusType">{{ statusText }}</el-tag>
     </template>
 
     <div class="space-y-2 pb-2">
diff --git a/ui/src/conversation-panel/components/content/items/group-tool/index.vue b/ui/src/conversation-panel/components/content/items/group-tool/index.vue
index ea121a6eed0..e5832420d06 100644
--- a/ui/src/conversation-panel/components/content/items/group-tool/index.vue
+++ b/ui/src/conversation-panel/components/content/items/group-tool/index.vue
@@ -19,6 +19,7 @@ const props = defineProps<{ content: ChatContent }>()
 
 // 相邻工具由 content-list 聚合，分组内按工具名选择专用展示。
 const toolItems = computed(() => props.content.children ?? [])
+const failedToolCount = computed(() => toolItems.value.filter((toolItem) => toolItem.status === 'FAIL' || toolItem.status === 'FAILURE').length)
 
 // 工具名（小写）→ 专用渲染器；新增工具时与 tool/index.vue 同步
 const toolRenderers: Dict<Component> = {
@@ -87,6 +88,11 @@ const isExpanded = computed({
     <template #label>
       <span v-if="groupStatus === 'running'" class="mk-conversation-loading" />
       <span>调用了 {{ toolItems.length }} 个工具</span>
+      <span v-if="failedToolCount">
+        （{{ failedToolCount }} 个
+        <span class="text-danger">失败</span>
+        ）
+      </span>
     </template>
 
     <div v-show="toolItems.length" class="bg-white border rounded-xl">
diff --git a/ui/src/conversation-panel/components/content/items/group/index.vue b/ui/src/conversation-panel/components/content/items/group/index.vue
index 78b1d832fd8..a669eb7d669 100644
--- a/ui/src/conversation-panel/components/content/items/group/index.vue
+++ b/ui/src/conversation-panel/components/content/items/group/index.vue
@@ -1,23 +1,6 @@
-<template>
-  <div class="content-group">
-    <!-- 分组头部：标题 + 状态，收起时附当前进展，点击展开/收起组内内容 -->
-    <button type="button" class="group-header" @click="isExpanded = !isExpanded">
-      <svg class="group-chevron" :class="{ open: isExpanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="group-name">{{ content.name }}</span>
-      <span v-if="!isExpanded && currentActivity" class="group-activity">{{ currentActivity }}</span>
-      <span v-if="statusClass" class="group-status" :class="statusClass">{{ statusText }}</span>
-    </button>
-
-    <div v-if="isExpanded && childContents.length" class="group-body">
-      <ContentList :content-list="childContents" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import type { ChatContent } from '@/api/types'
 import ContentList from '@/conversation-panel/components/content-list/index.vue'
 
 /**
@@ -25,9 +8,11 @@ import ContentList from '@/conversation-panel/components/content-list/index.vue'
  * content.children 为任意内容项（可再嵌套 GROUP），交由 ContentList 渲染。
  * 执行中或无状态时默认展开，结束后默认收起，手动切换后以手动为准；收起时展示最新一条子项在做什么。
  */
-const props = defineProps<{ content: any }>()
+defineOptions({ name: 'ConversationGroupContent' })
+
+const props = defineProps<{ content: ChatContent }>()
 
-const childContents = computed<any[]>(() => props.content.children ?? [])
+const childContents = computed(() => props.content.children ?? [])
 
 const STATUS_TEXT: Record<string, string> = {
   RUNNING: '执行中',
@@ -35,16 +20,17 @@ const STATUS_TEXT: Record<string, string> = {
   FAIL: '失败',
   FAILURE: '失败',
 }
-const statusText = computed(() => STATUS_TEXT[props.content.status] ?? props.content.status)
+const statusText = computed(() => STATUS_TEXT[props.content.status ?? ''] ?? props.content.status)
 
-const statusClass = computed(() => {
+const statusType = computed(() => {
   const status = props.content.status
-  if (!status) return ''
   if (status === 'SUCCESS') return 'success'
-  if (status === 'FAIL' || status === 'FAILURE') return 'error'
-  return 'running'
+  if (status === 'FAIL' || status === 'FAILURE') return 'danger'
+  return 'info'
 })
 
+const isFailed = computed(() => props.content.status === 'FAIL' || props.content.status === 'FAILURE')
+
 const manualExpanded = ref<boolean>()
 const isExpanded = computed({
   get: () => manualExpanded.value ?? (!props.content.status || props.content.status === 'RUNNING'),
@@ -57,7 +43,7 @@ function tail(text: string) {
 }
 
 // 子项在做什么：工具取名称，正文取末尾，思考固定文案，子分组取标题，失败取错误信息
-function describeChild(child: any): string {
+function describeChild(child: ChatContent): string {
   if (child.type === 'TOOL' || child.type === 'GROUP') return child.name ?? ''
   if (child.type === 'TEXT' || child.type === 'FAILURE') return tail(child.content ?? '')
   if (child.type === 'REASONING') return '思考中'
@@ -68,88 +54,36 @@ function describeChild(child: any): string {
 const currentActivity = computed(() => {
   const latestChild = childContents.value
     .filter((child) => describeChild(child))
-    .reduce<any>((latest, child) => (!latest || (child.id ?? '').localeCompare(latest.id ?? '') >= 0 ? child : latest), undefined)
+    .reduce<ChatContent | undefined>((latest, child) => (!latest || (child.id ?? '').localeCompare(latest.id ?? '') >= 0 ? child : latest), undefined)
   return latestChild ? describeChild(latestChild) : ''
 })
 </script>
 
-<style scoped lang="scss">
-.content-group {
-  margin-bottom: 8px;
-}
-
-.group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-  padding: 4px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 13px;
-  color: var(--t2, #606266);
-  text-align: left;
-  transition: color 0.15s;
-}
-
-.group-header:hover {
-  color: var(--t1, #303133);
-}
-
-.group-chevron {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  color: var(--t3, #909399);
-  transition: transform 0.15s;
-}
-
-.group-chevron.open {
-  transform: rotate(90deg);
-}
-
-.group-name {
-  flex-shrink: 0;
-  max-width: 60%;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.group-activity {
-  min-width: 0;
-  color: var(--t3, #909399);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.group-status {
-  flex-shrink: 0;
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--hv, #f5f7fa);
-}
-
-.group-status.success {
-  color: #67c23a;
-}
-
-.group-status.error {
-  color: #f56c6c;
-}
-
-.group-status.running {
-  color: var(--t3, #909399);
-}
-
-.group-body {
-  margin: 4px 0 0 5px;
-  padding-left: 12px;
-  border-left: 2px solid var(--bd, #dcdfe6);
-}
-</style>
+<template>
+  <!-- 展开或收起分组内容 -->
+  <MkCollapse
+    class="mb-2 w-full"
+    v-model:expanded="isExpanded"
+    indicator-position="after"
+    trigger-class="group text-N500! mb-2 w-fit max-w-full hover:text-N900!"
+  >
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="content.status === 'RUNNING'" class="mk-conversation-loading" />
+      <span class="min-w-0 max-w-[300px] truncate" :title="content.name">{{ content.name }}</span>
+      <span v-if="!isExpanded && currentActivity" class="min-w-0 truncate" :title="currentActivity">{{ currentActivity }}</span>
+      <el-tag v-if="isFailed" size="small" :type="statusType">{{ statusText }}</el-tag>
+    </template>
+
+    <div v-if="isExpanded && childContents.length" class="mt-1 border-l-2 border-N900/15 pl-3">
+      <ContentList :content-list="childContents" />
+    </div>
+  </MkCollapse>
+</template>
diff --git a/ui/src/conversation-panel/components/content/items/question.vue b/ui/src/conversation-panel/components/content/items/question.vue
index d016a1dfaac..274a6e87cdb 100644
--- a/ui/src/conversation-panel/components/content/items/question.vue
+++ b/ui/src/conversation-panel/components/content/items/question.vue
@@ -23,7 +23,7 @@ type QuestionContent = { content?: string } & Partial<Record<AttachmentField, Qu
 
 const props = defineProps<{ content: QuestionContent }>()
 
-// 合并各类已发送附件，统一换行排列；不依赖输入区的上传状态。
+// 非图片附件统一排列在上方，图片单独放在下方。
 const attachmentFields = ['document_list', 'image_list', 'audio_list', 'video_list', 'other_list'] as const
 const attachments = computed(() =>
   attachmentFields.flatMap((field) =>
@@ -36,6 +36,12 @@ const attachments = computed(() =>
     })),
   ),
 )
+const attachmentGroups = computed(() =>
+  [
+    { type: 'file', files: attachments.value.filter((file) => file.field !== 'image_list') },
+    { type: 'image', files: attachments.value.filter((file) => file.field === 'image_list') },
+  ].filter((group) => group.files.length > 0),
+)
 const imageSources = computed(() => attachments.value.filter((file) => file.field === 'image_list' && file.src).map((file) => file.src))
 
 function getAttachmentDescription(file: QuestionAttachment) {
@@ -46,42 +52,46 @@ function getAttachmentDescription(file: QuestionAttachment) {
 
 <template>
   <div class="mk-conversation-question-content group/question space-y-3 cursor-pointer">
-    <!-- 查看已发送附件，超出当前宽度时自动换行。 -->
-    <div v-if="attachments.length" class="flex-wrap max-w-full justify-end gap-2">
-      <template v-for="file in attachments" :key="file.key">
-        <div :class="file.field === 'image_list' ? 'shrink-0' : 'w-60 max-w-full'">
-          <!-- 查看图片 -->
-          <ImageUploadCard
-            v-if="file.field === 'image_list' && file.src"
-            :file="file"
-            :src="file.src"
-            :size="58"
-            :show-remove="false"
-            :preview-src-list="imageSources"
-            :initial-index="imageSources.indexOf(file.src)"
-            class="cursor-pointer"
-          />
-          <!-- 播放音频 -->
-          <MkAudio v-else-if="file.field === 'audio_list'" :src="file.src" :name="file.name">
-            <FileUploadCard :file="file" :description="getAttachmentDescription(file)" :show-remove="false" class="cursor-pointer rounded-lg!" />
-          </MkAudio>
-          <!-- 播放视频 -->
-          <MkVideo v-else-if="file.field === 'video_list'" :src="file.src" :name="file.name">
-            <FileUploadCard :file="file" :description="getAttachmentDescription(file)" :show-remove="false" class="cursor-pointer rounded-lg!" />
-          </MkVideo>
-          <!-- 下载文件 -->
-          <FileUploadCard
-            v-else-if="file.field !== 'image_list'"
-            :file="file"
-            :description="getAttachmentDescription(file)"
-            :show-remove="false"
-            class="cursor-pointer rounded-lg!"
-            @click="file.src && downloadByURL(file.src, file.name)"
-          />
+    <!-- 视频、音频和文档共用一行，图片在下方；超出当前宽度时自动换行。 -->
+    <div v-if="attachments.length" class="max-w-full space-y-2">
+      <template v-for="attachmentGroup in attachmentGroups" :key="attachmentGroup.type">
+        <div class="flex max-w-full flex-wrap justify-end gap-2">
+          <template v-for="file in attachmentGroup.files" :key="file.key">
+            <div :class="file.field === 'image_list' ? 'shrink-0' : 'w-60 max-w-full'">
+              <!-- 查看图片 -->
+              <ImageUploadCard
+                v-if="file.field === 'image_list' && file.src"
+                :file="file"
+                :src="file.src"
+                :size="58"
+                :show-remove="false"
+                :preview-src-list="imageSources"
+                :initial-index="imageSources.indexOf(file.src)"
+                class="cursor-pointer"
+              />
+              <!-- 播放音频 -->
+              <MkAudio v-else-if="file.field === 'audio_list'" :src="file.src" :name="file.name">
+                <FileUploadCard :file="file" :description="getAttachmentDescription(file)" :show-remove="false" class="cursor-pointer rounded-lg!" />
+              </MkAudio>
+              <!-- 播放视频 -->
+              <MkVideo v-else-if="file.field === 'video_list'" :src="file.src" :name="file.name">
+                <FileUploadCard :file="file" :description="getAttachmentDescription(file)" :show-remove="false" class="cursor-pointer rounded-lg!" />
+              </MkVideo>
+              <!-- 下载文件 -->
+              <FileUploadCard
+                v-else-if="file.field !== 'image_list'"
+                :file="file"
+                :description="getAttachmentDescription(file)"
+                :show-remove="false"
+                class="cursor-pointer rounded-lg!"
+                @click="file.src && downloadByURL(file.src, file.name)"
+              />
+            </div>
+          </template>
         </div>
       </template>
     </div>
-    <div v-if="content.content" class="mk-gray-card-lg max-w-full py-3! whitespace-pre-wrap wrap-anywhere">{{ content.content }}</div>
+    <div v-if="content.content" class="mk-gray-card-lg ml-auto w-fit max-w-full py-3! whitespace-pre-wrap wrap-anywhere">{{ content.content }}</div>
     <!-- TODO 用户的操作 -->
     <div class="h-8 -mt-3 flex items-center justify-end invisible group-hover/question:visible">
       <!-- 复制提问 -->
diff --git a/ui/src/conversation-panel/components/content/items/tool/DownloadSkills.vue b/ui/src/conversation-panel/components/content/items/tool/DownloadSkills.vue
index 1da61d25da7..7784a352ad0 100644
--- a/ui/src/conversation-panel/components/content/items/tool/DownloadSkills.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/DownloadSkills.vue
@@ -1,37 +1,12 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
-          <path d="M2 13h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
-        </svg>
-      </span>
-      <span class="tc-name">{{ skillName || 'download_skills' }}</span>
-      <span class="tc-lines" v-if="summary">{{ summary }}</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded && content.content" class="tc-body">
-        <div class="rf-block">
-          <pre class="rf-content">{{ content.content }}</pre>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 import { extractPartialJsonField } from './extract-partial-json'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+defineOptions({ name: 'ConversationDownloadSkillsContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const skillName = computed(() => {
   const raw = props.content.arguments
@@ -41,100 +16,35 @@ const skillName = computed(() => {
 const summary = computed(() => props.content.summary || '')
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-lines {
-  font-size: 11px;
-  color: var(--mk-N500);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 4px 0;
-}
+<template>
+  <!-- 展开或收起技能下载结果 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M2 13h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="skillName || 'download_skills'">{{ skillName || 'download_skills' }}</span>
+      <span class="shrink-0 font-mono text-xs text-N500" v-if="summary">{{ summary }}</span>
+    </template>
+    <div v-if="content.content" class="py-1">
+      <div class="rf-block">
+        <pre class="rf-content">{{ content.content }}</pre>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .rf-block {
   background: var(--mk-N100);
   border: 1px solid var(--mk-N300);
diff --git a/ui/src/conversation-panel/components/content/items/tool/Glob.vue b/ui/src/conversation-panel/components/content/items/tool/Glob.vue
index 3727ef72b52..b62154f999d 100644
--- a/ui/src/conversation-panel/components/content/items/tool/Glob.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/Glob.vue
@@ -1,42 +1,12 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3" />
-          <path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
-          <path d="M7 5v4M5 7h4" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" />
-        </svg>
-      </span>
-      <span class="tc-name">{{ pattern || 'glob' }}</span>
-      <span class="tc-param" v-if="dirPath">
-        <span class="tc-param-short">{{ dirPath }}/</span>
-        <span class="tc-param-full">{{ (args.path || '') + '/' }}</span>
-      </span>
-      <span class="tc-lines" v-if="summary">{{ summary }}</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded && content.content" class="tc-body">
-        <div class="rf-block">
-          <pre class="rf-content">{{ content.content }}</pre>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 import { extractPartialJsonFields } from './extract-partial-json'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+defineOptions({ name: 'ConversationGlobContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const args = computed(() => {
   const raw = props.content.arguments
@@ -55,60 +25,40 @@ const dirPath = computed(() => {
 const summary = computed(() => props.content.summary || '')
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+<template>
+  <!-- 展开或收起文件搜索结果 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3" />
+        <path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+        <path d="M7 5v4M5 7h4" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="pattern || 'glob'">{{ pattern || 'glob' }}</span>
+      <span class="tc-param" v-if="dirPath">
+        <span class="tc-param-short">{{ dirPath }}/</span>
+        <span class="tc-param-full">{{ (args.path || '') + '/' }}</span>
+      </span>
+      <span class="shrink-0 font-mono text-xs text-N500" v-if="summary">{{ summary }}</span>
+    </template>
+    <div v-if="content.content" class="py-1">
+      <div class="rf-block">
+        <pre class="rf-content">{{ content.content }}</pre>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .tc-param {
   font-size: 11px;
   color: var(--mk-N500);
@@ -131,46 +81,6 @@ const summary = computed(() => props.content.summary || '')
   display: inline;
 }
 
-.tc-lines {
-  font-size: 11px;
-  color: var(--mk-N500);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 4px 0;
-}
-
 .rf-block {
   background: var(--mk-N100);
   border: 1px solid var(--mk-N300);
diff --git a/ui/src/conversation-panel/components/content/items/tool/Grep.vue b/ui/src/conversation-panel/components/content/items/tool/Grep.vue
index 3be282ce670..e14da190d09 100644
--- a/ui/src/conversation-panel/components/content/items/tool/Grep.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/Grep.vue
@@ -1,37 +1,12 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3" />
-          <path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
-        </svg>
-      </span>
-      <span class="tc-name">{{ pattern || 'grep' }}</span>
-      <span class="tc-lines" v-if="summary">{{ summary }}</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded && content.content" class="tc-body">
-        <div class="rf-block">
-          <pre class="rf-content">{{ content.content }}</pre>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 import { extractPartialJsonField } from './extract-partial-json'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+defineOptions({ name: 'ConversationGrepContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const pattern = computed(() => {
   const raw = props.content.arguments
@@ -41,100 +16,35 @@ const pattern = computed(() => {
 const summary = computed(() => props.content.summary || '')
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-lines {
-  font-size: 11px;
-  color: var(--mk-N500);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 4px 0;
-}
+<template>
+  <!-- 展开或收起文本搜索结果 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3" />
+        <path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="pattern || 'grep'">{{ pattern || 'grep' }}</span>
+      <span class="shrink-0 font-mono text-xs text-N500" v-if="summary">{{ summary }}</span>
+    </template>
+    <div v-if="content.content" class="py-1">
+      <div class="rf-block">
+        <pre class="rf-content">{{ content.content }}</pre>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .rf-block {
   background: var(--mk-N100);
   border: 1px solid var(--mk-N300);
diff --git a/ui/src/conversation-panel/components/content/items/tool/ListDir.vue b/ui/src/conversation-panel/components/content/items/tool/ListDir.vue
index bd1d54435a3..7a20dfbae4f 100644
--- a/ui/src/conversation-panel/components/content/items/tool/ListDir.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/ListDir.vue
@@ -1,41 +1,12 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <path
-            d="M2 4.5A1.5 1.5 0 0 1 3.5 3h2.086a1.5 1.5 0 0 1 1.06.44l.354.354a.5.5 0 0 0 .354.146H12.5A1.5 1.5 0 0 1 14 5.44V11.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 11.5v-7Z"
-            stroke="currentColor"
-            stroke-width="1.3"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </span>
-      <span class="tc-name">{{ dirPath || 'list_dir' }}</span>
-      <span class="tc-lines" v-if="summary">{{ summary }}</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded && content.content" class="tc-body">
-        <div class="rf-block">
-          <pre class="rf-content">{{ content.content }}</pre>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 import { extractPartialJsonField } from './extract-partial-json'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+defineOptions({ name: 'ConversationListDirContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const dirPath = computed(() => {
   const raw = props.content.arguments
@@ -45,100 +16,39 @@ const dirPath = computed(() => {
 const summary = computed(() => props.content.summary || '')
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-lines {
-  font-size: 11px;
-  color: var(--mk-N500);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 4px 0;
-}
+<template>
+  <!-- 展开或收起目录内容 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <path
+          d="M2 4.5A1.5 1.5 0 0 1 3.5 3h2.086a1.5 1.5 0 0 1 1.06.44l.354.354a.5.5 0 0 0 .354.146H12.5A1.5 1.5 0 0 1 14 5.44V11.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 11.5v-7Z"
+          stroke="currentColor"
+          stroke-width="1.3"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="dirPath || 'list_dir'">{{ dirPath || 'list_dir' }}</span>
+      <span class="shrink-0 font-mono text-xs text-N500" v-if="summary">{{ summary }}</span>
+    </template>
+    <div v-if="content.content" class="py-1">
+      <div class="rf-block">
+        <pre class="rf-content">{{ content.content }}</pre>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .rf-block {
   background: var(--mk-N100);
   border: 1px solid var(--mk-N300);
diff --git a/ui/src/conversation-panel/components/content/items/tool/ListSkills.vue b/ui/src/conversation-panel/components/content/items/tool/ListSkills.vue
index c30143ac9a2..8f37a4c1332 100644
--- a/ui/src/conversation-panel/components/content/items/tool/ListSkills.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/ListSkills.vue
@@ -1,133 +1,43 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
-        </svg>
-      </span>
-      <span class="tc-name">list_skills</span>
-      <span class="tc-lines" v-if="summary">{{ summary }}</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded && content.content" class="tc-body">
-        <div class="rf-block">
-          <pre class="rf-content">{{ content.content }}</pre>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+defineOptions({ name: 'ConversationListSkillsContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const summary = computed(() => props.content.summary || '')
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-lines {
-  font-size: 11px;
-  color: var(--mk-N500);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 4px 0;
-}
+<template>
+  <!-- 展开或收起技能列表 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="'list_skills'">list_skills</span>
+      <span class="shrink-0 font-mono text-xs text-N500" v-if="summary">{{ summary }}</span>
+    </template>
+    <div v-if="content.content" class="py-1">
+      <div class="rf-block">
+        <pre class="rf-content">{{ content.content }}</pre>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .rf-block {
   background: var(--mk-N100);
   border: 1px solid var(--mk-N300);
diff --git a/ui/src/conversation-panel/components/content/items/tool/Patch.vue b/ui/src/conversation-panel/components/content/items/tool/Patch.vue
index 5d9b007c703..7359de461a5 100644
--- a/ui/src/conversation-panel/components/content/items/tool/Patch.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/Patch.vue
@@ -1,82 +1,16 @@
-<template>
-  <div class="tool-call">
-    <!-- 单文件 -->
-    <template v-if="files.length <= 1">
-      <button class="tc-head" @click="expanded = !expanded">
-        <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-          <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-        <span class="tc-icon" :class="{ spin: loading }">
-          <Loading v-if="loading" :size="14" />
-          <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-            <path d="M2 3.5h12M2 8h12M2 12.5h8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
-          </svg>
-        </span>
-        <span class="tc-name">{{ singleTitle }}</span>
-        <template v-if="singleFile">
-          <span class="tc-stat add" v-if="singleFile.additions">+{{ singleFile.additions }}</span>
-          <span class="tc-stat del" v-if="singleFile.deletions">-{{ singleFile.deletions }}</span>
-        </template>
-      </button>
-      <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-        <div v-if="expanded && singleFile" class="tc-body">
-          <ScrollDiff :file="singleFile" />
-        </div>
-      </Transition>
-    </template>
-
-    <!-- 多文件：汇总 + 每个文件独立展开 -->
-    <template v-else>
-      <button class="tc-head" @click="expanded = !expanded">
-        <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-          <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-        <span class="tc-icon" :class="{ spin: loading }">
-          <Loading v-if="loading" :size="14" />
-          <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-            <path d="M2 3.5h12M2 8h12M2 12.5h8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
-          </svg>
-        </span>
-        <span class="tc-name">Edit {{ files.length }} files</span>
-        <span class="tc-stat add" v-if="summary.additions">+{{ summary.additions }}</span>
-        <span class="tc-stat del" v-if="summary.deletions">-{{ summary.deletions }}</span>
-      </button>
-      <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-        <div v-if="expanded" class="tc-body">
-          <div ref="multiScrollRef" class="tc-files tc-scroll-files">
-            <div v-for="(file, i) in files" :key="`${file.status}:${file.newPath}:${i}`" class="tc-file-item">
-              <button class="tc-file-head" @click="toggleFile(i)">
-                <svg class="tc-chevron sm" :class="{ open: fileExpanded[i] }" viewBox="0 0 16 16" fill="none">
-                  <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-                <span class="tc-file-verb">{{ verb(file.status) }}</span>
-                <span class="tc-file-path">{{ file.newPath || file.oldPath }}</span>
-                <span class="tc-stat add" v-if="file.additions">+{{ file.additions }}</span>
-                <span class="tc-stat del" v-if="file.deletions">-{{ file.deletions }}</span>
-              </button>
-              <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-                <div v-if="fileExpanded[i]" class="tc-file-body">
-                  <ScrollDiff :file="file" />
-                </div>
-              </Transition>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </template>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, reactive, ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 import ScrollDiff from './components/ScrollDiff.vue'
 import { parsePatch } from './patch/parsePatch'
 import type { PatchFileStatus } from './patch/patchTypes'
 import { extractPartialJsonField } from './extract-partial-json'
 import { Scroll } from '@/conversation-panel/core/scroll'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
+defineOptions({ name: 'ConversationPatchContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const multiScrollRef = ref<HTMLElement>()
 let multiScroll: Scroll | null = null
@@ -90,20 +24,20 @@ function initScroll() {
 }
 
 onMounted(() => {
-  if (props.expanded) initScroll()
+  if (expanded.value) initScroll()
 })
 
 watch(
-  () => props.expanded,
-  async (val) => {
-    if (val) {
-      await nextTick()
+  [expanded, multiScrollRef],
+  () => {
+    if (expanded.value && multiScrollRef.value) {
       initScroll()
     } else {
       multiScroll?.destroy()
       multiScroll = null
     }
   },
+  { flush: 'post' },
 )
 
 onBeforeUnmount(() => multiScroll?.destroy())
@@ -141,18 +75,10 @@ const summary = computed(() =>
   ),
 )
 
-const expanded = ref(props.expanded)
-watch(
-  () => props.expanded,
-  (val) => {
-    expanded.value = val
-  },
-)
+// 多文件分别保留展开状态，默认收起。
 const fileExpanded = reactive<Record<number, boolean>>({})
-
-function toggleFile(i: number) {
-  fileExpanded[i] = !fileExpanded[i]
-}
+const patchTitle = computed(() => (files.value.length > 1 ? `Edit ${files.value.length} files` : singleTitle.value))
+const patchStats = computed(() => singleFile.value ?? summary.value)
 
 function verb(status: PatchFileStatus) {
   const map: Record<PatchFileStatus, string> = {
@@ -169,162 +95,79 @@ function verb(status: PatchFileStatus) {
 }
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-.tc-chevron.sm {
-  width: 12px;
-  height: 12px;
-}
+<template>
+  <!-- 展开或收起文件差异 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <path d="M2 3.5h12M2 8h12M2 12.5h8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="patchTitle">{{ patchTitle }}</span>
+      <span v-if="patchStats.additions" class="tc-stat add">+{{ patchStats.additions }}</span>
+      <span v-if="patchStats.deletions" class="tc-stat del">-{{ patchStats.deletions }}</span>
+    </template>
+    <ScrollDiff v-if="expanded && singleFile" :file="singleFile" />
+    <div v-else-if="expanded && files.length > 1" ref="multiScrollRef" class="tc-files tc-scroll-files">
+      <template v-for="(file, index) in files" :key="`${file.status}:${file.newPath}:${index}`">
+        <!-- 展开或收起单个文件差异 -->
+        <MkCollapse
+          v-model:expanded="fileExpanded[index]"
+          :default-expanded="false"
+          class="py-0.5"
+          indicator-position="after"
+          trigger-class="group text-N500! mb-2 w-fit max-w-full hover:text-N900!"
+        >
+          <template #indicator="{ expanded }">
+            <MkIcon
+              name="icon_right_outlined"
+              :size="12"
+              class="transition-transform text-N500! group-hover:text-N900!"
+              :class="{ 'rotate-90': expanded }"
+            />
+          </template>
+          <template #label>
+            <span class="shrink-0 text-xs font-semibold">{{ verb(file.status) }}</span>
+            <span class="min-w-0 max-w-[300px] truncate font-mono text-xs text-N600" :title="file.newPath || file.oldPath">
+              {{ file.newPath || file.oldPath }}
+            </span>
+            <span v-if="file.additions" class="tc-stat add">+{{ file.additions }}</span>
+            <span v-if="file.deletions" class="tc-stat del">-{{ file.deletions }}</span>
+          </template>
+          <ScrollDiff v-if="fileExpanded[index]" :file="file" />
+        </MkCollapse>
+      </template>
+    </div>
+  </MkCollapse>
+</template>
 
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+<style scoped>
+.tc-stat {
   flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-stat {
   font-size: 11px;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
 }
 .tc-stat.add {
-  color: #16a34a;
+  color: var(--el-color-success-dark-2);
 }
 .tc-stat.del {
   color: var(--mk-danger);
 }
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 800px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 800px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 6px 0 4px 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
 .tc-scroll-files {
   max-height: 400px;
   overflow-y: auto;
 }
-
 .tc-files {
   background: var(--mk-N100);
   border-radius: 6px;
-  overflow: hidden;
   padding: 6px 10px;
 }
-
-.tc-file-item {
-  padding: 2px 0;
-}
-
-.tc-file-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-file-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-file-verb {
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.tc-file-path {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 12px;
-  color: var(--mk-N600);
-}
-
-.tc-file-body {
-}
 </style>
diff --git a/ui/src/conversation-panel/components/content/items/tool/ReadFile.vue b/ui/src/conversation-panel/components/content/items/tool/ReadFile.vue
index 19996132911..27a41a1af5b 100644
--- a/ui/src/conversation-panel/components/content/items/tool/ReadFile.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/ReadFile.vue
@@ -1,46 +1,12 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <path d="M4 2h8l2 2v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" />
-          <path d="M6 8h4M6 10.5h4M6 5.5h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
-        </svg>
-      </span>
-      <span class="tc-name">{{ filePath || 'read_file' }}</span>
-      <span class="tc-lines" v-if="lineCount">{{ lineCount }} lines</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded && parsedLines.length" class="tc-body">
-        <div class="rf-block">
-          <table class="rf-table">
-            <tbody>
-              <tr v-for="(line, i) in parsedLines" :key="i" class="rf-row">
-                <td class="rf-ln">{{ line.num }}</td>
-                <td class="rf-code">
-                  <code>{{ line.text || ' ' }}</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
 import { extractPartialJsonField } from './extract-partial-json'
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+defineOptions({ name: 'ConversationReadFileContent' })
+
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
 const filePath = computed(() => {
   const raw = props.content.arguments
@@ -63,100 +29,46 @@ const parsedLines = computed(() => {
 const lineCount = computed(() => parsedLines.value.length)
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-lines {
-  font-size: 11px;
-  color: var(--mk-N500);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  flex-shrink: 0;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 4px 0;
-}
+<template>
+  <!-- 展开或收起文件内容 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <path d="M4 2h8l2 2v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" />
+        <path d="M6 8h4M6 10.5h4M6 5.5h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="filePath || 'read_file'">{{ filePath || 'read_file' }}</span>
+      <span class="shrink-0 font-mono text-xs text-N500" v-if="lineCount">{{ lineCount }} lines</span>
+    </template>
+    <div v-if="parsedLines.length" class="py-1">
+      <div class="rf-block">
+        <table class="rf-table">
+          <tbody>
+            <template v-for="(line, i) in parsedLines" :key="i">
+              <tr class="rf-row">
+                <td class="rf-ln">{{ line.num }}</td>
+                <td class="rf-code">
+                  <code>{{ line.text || ' ' }}</code>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .rf-block {
   background: var(--mk-N100);
   border: 1px solid var(--mk-N300);
diff --git a/ui/src/conversation-panel/components/content/items/tool/RunSkill.vue b/ui/src/conversation-panel/components/content/items/tool/RunSkill.vue
index a95621b528f..d1eb3238ecf 100644
--- a/ui/src/conversation-panel/components/content/items/tool/RunSkill.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/RunSkill.vue
@@ -1,45 +1,19 @@
-<template>
-  <div class="tool-call">
-    <button class="tc-head" @click="$emit('toggle')">
-      <svg class="tc-chevron" :class="{ open: expanded }" viewBox="0 0 16 16" fill="none">
-        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span class="tc-icon" :class="{ spin: loading }">
-        <Loading v-if="loading" :size="14" />
-        <svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none">
-          <path d="M7 8l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
-          <path d="M2 12h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
-        </svg>
-      </span>
-      <span class="tc-name">{{ skillLabel }}</span>
-    </button>
-
-    <Transition enter-active-class="tc-expand-enter" leave-active-class="tc-expand-leave">
-      <div v-if="expanded" class="tc-body">
-        <div class="tc-term-block">
-          <div class="tc-term-line cmd">$ {{ commandText }}</div>
-          <pre class="tc-term-line out" v-if="content.content">{{ content.content }}</pre>
-          <span v-if="loading" class="tc-cursor">▋</span>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import Loading from '@/conversation-panel/loading/index.vue'
+import type { ChatContent } from '@/api/types'
+
+defineOptions({ name: 'ConversationRunSkillContent' })
 
-const props = defineProps<{ content: any; loading: boolean; expanded: boolean }>()
-defineEmits<{ toggle: [] }>()
+const props = defineProps<{ content: ChatContent; loading: boolean }>()
+const expanded = defineModel<boolean>('expanded', { required: true })
 
-const args = computed(() => {
+const args = computed<Record<string, string>>(() => {
   const raw = props.content.arguments
-  if (!raw) return {} as any
+  if (!raw) return {}
   try {
-    return JSON.parse(raw)
+    return JSON.parse(raw) ?? {}
   } catch {
-    return {} as any
+    return {}
   }
 })
 
@@ -54,93 +28,36 @@ const skillLabel = computed(() => {
 const commandText = computed(() => args.value.command || '')
 </script>
 
-<style scoped>
-.tool-call {
-  width: 100%;
-}
-
-.tc-head {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  color: var(--mk-N500);
-  transition: color 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-}
-.tc-head:hover {
-  color: var(--mk-N900);
-}
-
-.tc-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.tc-chevron.open {
-  transform: rotate(90deg);
-}
-
-.tc-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.tc-icon.spin {
-  color: var(--mk-N600);
-}
-
-.tc-name {
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tc-expand-enter {
-  animation: tc-open 0.2s ease-out;
-  overflow: hidden;
-}
-.tc-expand-leave {
-  animation: tc-close 0.15s ease-in forwards;
-  overflow: hidden;
-}
-@keyframes tc-open {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-@keyframes tc-close {
-  from {
-    opacity: 1;
-    max-height: 600px;
-  }
-  to {
-    opacity: 0;
-    max-height: 0;
-  }
-}
-
-.tc-body {
-  padding: 6px 0 4px 8px;
-}
+<template>
+  <!-- 展开或收起技能执行结果 -->
+  <MkCollapse class="w-full" v-model:expanded="expanded" indicator-position="after" trigger-class="group text-N500! mb-2 w-fit hover:text-N900!">
+    <template #indicator="{ expanded }">
+      <MkIcon
+        name="icon_right_outlined"
+        :size="12"
+        class="transition-transform text-N500! group-hover:text-N900!"
+        :class="{ 'rotate-90': expanded }"
+      />
+    </template>
+    <template #label>
+      <span v-if="loading" class="mk-conversation-loading" />
+      <svg class="shrink-0" viewBox="0 0 16 16" width="16" height="16" fill="none">
+        <path d="M7 8l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M2 12h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+      </svg>
+      <span class="min-w-0 max-w-[300px] truncate" :title="skillLabel">{{ skillLabel }}</span>
+    </template>
+    <div class="py-1">
+      <div class="tc-term-block">
+        <div class="tc-term-line cmd">$ {{ commandText }}</div>
+        <pre class="tc-term-line out" v-if="content.content">{{ content.content }}</pre>
+        <span v-if="loading" class="tc-cursor">▋</span>
+      </div>
+    </div>
+  </MkCollapse>
+</template>
 
+<style scoped>
 .tc-term-block {
   background: #1e1e2e;
   border-radius: 6px;
diff --git a/ui/src/conversation-panel/components/content/items/tool/index.vue b/ui/src/conversation-panel/components/content/items/tool/index.vue
index 395747e89a2..aaaed43ae09 100644
--- a/ui/src/conversation-panel/components/content/items/tool/index.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/index.vue
@@ -43,13 +43,6 @@ const toolRenderer = computed(() => toolRenderers[(props.content.name || '').toL
 </script>
 
 <template>
-  <component
-    v-if="toolRenderer"
-    :is="toolRenderer"
-    :content="content"
-    :loading="loading"
-    v-model:expanded="isExpanded"
-    @toggle="isExpanded = !isExpanded"
-  />
+  <component v-if="toolRenderer" :is="toolRenderer" :content="content" :loading="loading" v-model:expanded="isExpanded" />
   <DefaultTool v-else :content="content" />
 </template>
diff --git a/ui/src/conversation-panel/components/content/items/tool/tool.vue b/ui/src/conversation-panel/components/content/items/tool/tool.vue
index 1b5b84f1480..da743575b0a 100644
--- a/ui/src/conversation-panel/components/content/items/tool/tool.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/tool.vue
@@ -30,6 +30,8 @@ const statusType = computed(() => {
   return 'info'
 })
 
+const isFailed = computed(() => props.content.status === 'FAIL' || props.content.status === 'FAILURE')
+
 // 参数为 JSON 字符串，尝试格式化展示，失败则原样展示
 function tryFormatJson(value: unknown): string {
   if (value == null) return ''
@@ -68,7 +70,7 @@ const formattedResult = computed(() => tryFormatJson(props.content.content))
       <span v-if="loading" class="mk-conversation-loading" />
       <MkIcon name="icon_busy_outlined" />
       <span class="min-w-0 max-w-[300px] truncate" :title="toolTitle">{{ toolTitle }}</span>
-      <el-tag v-if="content.status" size="small" :type="statusType">{{ statusText }}</el-tag>
+      <el-tag v-if="isFailed" size="small" :type="statusType">{{ statusText }}</el-tag>
     </template>
 
     <div class="space-y-2">
diff --git a/ui/src/conversation-panel/components/message-input/file-card/index.vue b/ui/src/conversation-panel/components/message-input/file-card/index.vue
new file mode 100644
index 00000000000..04cf450df5c
--- /dev/null
+++ b/ui/src/conversation-panel/components/message-input/file-card/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import FileUploadCard from '@/components/mk-drag-upload/FileUploadCard.vue'
+import type { UploadCardFile } from '@/components/mk-drag-upload/types'
+
+defineOptions({ name: 'MessageInputFileUploadCard' })
+withDefaults(defineProps<{ file: UploadCardFile; percentage?: number; disabled?: boolean }>(), { disabled: false })
+const emit = defineEmits<{ remove: [] }>()
+</script>
+
+<template>
+  <div class="group relative">
+    <FileUploadCard :file="file" :percentage="percentage" :disabled="disabled" :show-remove="false" class="rounded-lg!" />
+    <!-- 删除已选附件 -->
+    <button
+      type="button"
+      class="group-hover-visible mk-remove-button disabled:cursor-not-allowed"
+      title="删除文件"
+      :disabled="disabled"
+      @click.stop="emit('remove')"
+    >
+      <MkIcon name="icon_close_bold_outlined" class="text-white!" :size="6" />
+    </button>
+  </div>
+</template>
diff --git a/ui/src/conversation-panel/components/message-input/index.ts b/ui/src/conversation-panel/components/message-input/index.ts
index bcf16f01a6e..c0e96bdb078 100644
--- a/ui/src/conversation-panel/components/message-input/index.ts
+++ b/ui/src/conversation-panel/components/message-input/index.ts
@@ -1,6 +1,7 @@
 import { ref, computed, reactive, watch, inject, type Ref, type InjectionKey } from 'vue'
 import { IMAGE_EXTENSIONS, DOCUMENT_EXTENSIONS, VIDEO_EXTENSIONS, AUDIO_EXTENSIONS } from '@/constants/file-type'
 import { isImage, isDocument, isAudio, isVideo } from '@/utils/icon'
+import { MsgError } from '@/utils/message'
 import type { Dict } from '@/api/types'
 import type { ChatMessage, Conversation, ConversationAppInfo, SendMessageOptions } from '../../core/types'
 import { createUserFormStore } from './user-form/index'
@@ -113,7 +114,7 @@ export function createMessageInputStore(deps: MessageInputDeps) {
     uploadAttachment(attachment)
   }
 
-  // 原文件重试复用上传流程；移除或切换会话后忽略旧请求的回调。
+  // 移除或切换会话后忽略旧请求的回调。
   const uploadAttachment = (attachment: FileItem) => {
     if (disabled.value || streamLoading.value || sending.value || attachment.status === 'uploading' || !fileList.value.includes(attachment)) return
     attachment.status = 'uploading'
@@ -137,17 +138,14 @@ export function createMessageInputStore(deps: MessageInputDeps) {
         attachment.progress = 100
         attachment.status = 'success'
       })
-      .catch(() => {
-        if (!fileList.value.includes(attachment)) return
-        attachment.status = 'fail'
-        attachment.errMsg = '上传失败'
+      .catch((error: unknown) => {
+        const index = fileList.value.indexOf(attachment)
+        if (index < 0) return
+        removeFile(index)
+        MsgError('上传失败')
       })
   }
 
-  const retryFile = (attachment: FileItem) => {
-    if (attachment.status === 'fail') uploadAttachment(attachment)
-  }
-
   const addFiles = (files: FileList | File[] | null | undefined) => {
     if (!files || disabled.value) return
     Array.from(files).forEach(addFile)
@@ -266,7 +264,6 @@ export function createMessageInputStore(deps: MessageInputDeps) {
     addFile,
     addFiles,
     removeFile,
-    retryFile,
     send,
     sendQuestion,
     stop,
diff --git a/ui/src/conversation-panel/components/message-input/index.vue b/ui/src/conversation-panel/components/message-input/index.vue
index da92a1c9dce..3d4d4f37736 100644
--- a/ui/src/conversation-panel/components/message-input/index.vue
+++ b/ui/src/conversation-panel/components/message-input/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { getFileExtension, isAudio, isVideo } from '@/utils/icon'
-import { formatFileSize } from '@/utils/number'
+import { isAudio, isVideo } from '@/utils/icon'
 import { useInputEvents } from '../../core/input-events'
-import { useMessageInputStore, type FileItem } from './index'
-import FileUploadCard from '@/components/mk-drag-upload/FileUploadCard.vue'
+import { useMessageInputStore } from './index'
+import FileCard from './file-card/index.vue'
 import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
 import UserForm from './user-form/index.vue'
 
@@ -20,7 +19,6 @@ const {
   imageFiles,
   addFiles,
   removeFile,
-  retryFile,
   send,
   stop,
 } = useMessageInputStore()
@@ -34,11 +32,6 @@ const { fileInputRef, handleFileSelect, handlePaste, handleDragover, handleDrop,
     if (canSend.value) send()
   },
 })
-// 对话附件保留类型与已上传大小文案，卡片负责统一展示。
-function getAttachmentDescription(file: FileItem) {
-  const uploaded = file.status === 'uploading' ? formatFileSize((file.size * (file.progress ?? 0)) / 100) + ' / ' : ''
-  return (getFileExtension(file.name) || '文件') + ' – ' + uploaded + formatFileSize(file.size)
-}
 </script>
 
 <template>
@@ -54,44 +47,24 @@ function getAttachmentDescription(file: FileItem) {
             :src="file.url || file.previewUrl"
             :size="58"
             :percentage="file.progress"
-            :disabled="disabled || streamLoading"
             :show-error="false"
-            @retry="retryFile(file)"
             @remove="removeFile(index)"
           />
           <!-- 音频 -->
           <MkAudio v-else-if="isAudio(file.name)" :src="file.previewUrl || file.url || ''" :name="file.name">
-            <FileUploadCard
-              :file="file"
-              :description="getAttachmentDescription(file)"
-              :percentage="file.progress"
-              :disabled="disabled || streamLoading"
-              class="w-60 cursor-pointer rounded-lg!"
-              @retry="retryFile(file)"
-              @remove="removeFile(index)"
-            />
+            <FileCard :file="file" :percentage="file.progress" class="w-60 cursor-pointer rounded-lg!" @remove="removeFile(index)" />
           </MkAudio>
           <!-- 视频 -->
           <MkVideo v-else-if="isVideo(file.name)" :src="file.previewUrl || file.url || ''" :name="file.name">
-            <FileUploadCard
-              :file="file"
-              :description="getAttachmentDescription(file)"
-              :percentage="file.progress"
-              :disabled="disabled || streamLoading"
-              class="w-60 cursor-pointer rounded-lg!"
-              @retry="retryFile(file)"
-              @remove="removeFile(index)"
-            />
+            <FileCard :file="file" :percentage="file.progress" class="w-60 cursor-pointer rounded-lg!" @remove="removeFile(index)" />
           </MkVideo>
           <!-- 文档 -->
-          <FileUploadCard
+          <FileCard
             v-else
             :file="file"
-            :description="getAttachmentDescription(file)"
             :percentage="file.progress"
             :disabled="disabled || streamLoading"
-            class="w-60 rounded-lg!"
-            @retry="retryFile(file)"
+            class="w-60 cursor-pointer rounded-lg!"
             @remove="removeFile(index)"
           />
         </div>
diff --git a/ui/src/conversation-panel/components/message-list/index.vue b/ui/src/conversation-panel/components/message-list/index.vue
index d8dd9ec131f..93396a3f8e0 100644
--- a/ui/src/conversation-panel/components/message-list/index.vue
+++ b/ui/src/conversation-panel/components/message-list/index.vue
@@ -37,7 +37,7 @@ const showUserAvatar = computed(() => appInfo.value?.show_user_avatar)
       <!-- 开场白在空会话或历史全部加载后显示，固定在会话最前 -->
       <div v-if="prologue && (!messages.length || !hasMore)">
         <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0" />
-        <PrologueContent :prologue="prologue" :app-info="appInfo" />
+        <PrologueContent :prologue="prologue" :app-info="appInfo" class="mb-3" />
       </div>
     </template>
     <template v-for="(msg, i) in messages" :key="msg.id || i">
diff --git a/ui/src/layout/sidebar/WorkspaceSidebar.vue b/ui/src/layout/sidebar/WorkspaceSidebar.vue
index 962ed5d84a6..668e404e1da 100644
--- a/ui/src/layout/sidebar/WorkspaceSidebar.vue
+++ b/ui/src/layout/sidebar/WorkspaceSidebar.vue
@@ -22,7 +22,7 @@ function navigateToWorkspaceMenu(workspaceMenuItem: LayoutMenuItem) {
     <div
       v-for="workspaceMenuItem in workspaceMenuItems"
       :key="workspaceMenuItem.name"
-      class="flex-col-center w-full cursor-pointer rounded-md py-2 text-xs font-semibold text-N600"
+      class="flex-col-center w-full cursor-pointer rounded-md py-2 text-xs font-semibold text-N600 hover:bg-N900/10"
       :class="isWorkspaceMenuActive(workspaceMenuItem) && 'bg-white text-N900'"
       @click="navigateToWorkspaceMenu(workspaceMenuItem)"
     >
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index f8558deeac2..b1ab4d757cf 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -341,8 +341,8 @@ View 负责路由、资源与模式、图加载、保存／发布／调试编排
 - 智能体页面专属按钮组件放在 `workflow/application/components/`。
   `ButtonDebug` 组合调试按钮与对话模块 DebugPanel，通过页面传入的改动检查、画布校验、保存方法和共享 loading
   完成校验、保存后调试流程；每次打开调试都先校验画布，通过后仅保存未提交修改，校验失败提示原因且不保存、不打开调试；公开 `close()` 供页面其他操作关闭调试。
-  `ButtonAiGenerate` 组合 AI 生成按钮与生成面板；生成面板与调试面板一样自行 Teleport 到 body，
-  使用固定定位，顶部避开工作流工具栏。
+  `ButtonAiGenerate` 组合 AI 生成按钮与生成面板；生成面板复用 `MkDrawer`，与默认模型设置、发布历史一致，
+  右侧贴边并在顶部避开工作流工具栏；关闭保留会话记录，生成中禁止关闭。
   智能体工作流页面通过 `label` 传入 AI 生成、模板中心、默认模型设置、调试和发布历史入口文案。
   工具使用 debug Drawer、SSE 和执行详情；知识库保留任务轮询与导入 Action。
   智能体画布按 Workspace／System 资源管理选择详情、保存、发布、模型和历史 API；DebugPanel 尚未按 System 范围适配。
diff --git a/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue b/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue
index ab62d02b20e..ee31d083b9a 100644
--- a/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue
+++ b/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue
@@ -3,7 +3,8 @@ import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef } from
 import { useRoute } from 'vue-router'
 import type LogicFlow from '@logicflow/core'
 import type { ScrollbarInstance } from 'element-plus'
-import type { DefaultModelSettingPayload, ModelItem } from '@/api/types'
+import type { DefaultModelSettingPayload, ModelItem, ModelProviderItem } from '@/api/types'
+import SelectModel from '@/components/business/select-model/index.vue'
 import ContentList from '@/conversation-panel/components/content-list/index.vue'
 import { inputShortcut } from '@/conversation-panel/core/shortcuts'
 import { MsgError, MsgSuccess } from '@/utils/message'
@@ -38,6 +39,7 @@ const status = ref<GenerateStatus>('idle')
 const requirement = ref('')
 const modelId = ref('')
 const modelOptions = ref<ModelItem[]>([])
+const providerOptions = ref<ModelProviderItem[]>([])
 const scrollbarRef = useTemplateRef<ScrollbarInstance>('scrollbarRef')
 const activity = createActivity()
 const busy = computed(() => status.value === 'running')
@@ -46,9 +48,9 @@ const started = computed(() => status.value !== 'idle')
 let agent: AgentHandle | null = null
 
 function loadModels() {
-  store
-    .getModelListWithShared({ model_type: 'LLM' })
-    .then((models) => {
+  Promise.all([store.getModelListWithShared({ model_type: 'LLM' }), store.getProviderList()])
+    .then(([models, providers]) => {
+      providerOptions.value = providers
       modelOptions.value = models
       if (!modelId.value) {
         const defaultModelId = props.defaultModelSettings?.LLM?.model_id
@@ -147,47 +149,44 @@ defineExpose({ open, close })
 </script>
 
 <template>
-  <!-- 生成面板挂载到 body，固定定位并避开工作流工具栏。 -->
-  <Teleport to="body">
-    <div
-      v-if="visible"
-      class="fixed top-header mt-4 right-4 bottom-4 z-20 flex w-105 flex-col rounded-xl border border-N300 bg-white shadow-lg"
-      @keydown.stop
-      @paste.stop
-    >
-      <div class="flex-between shrink-0 border-b border-N300 px-4 py-3">
+  <MkDrawer
+    v-model="visible"
+    title="AI 生成"
+    size="480"
+    class="top-header! h-layout-content! max-w-full rounded-tl-xl!"
+    content-class="h-full p-0!"
+    :modal="false"
+    modal-penetrable
+    :lock-scroll="false"
+  >
+    <template #header>
+      <div class="flex-between flex-1">
         <h4 class="flex-align-center gap-2">
           <MkIcon name="icon_star_colorful" />
           AI 生成
         </h4>
-        <div class="flex-align-center gap-1">
-          <!-- 新建生成会话 -->
-          <el-button text :disabled="busy || !started" @click="reset">
-            <MkIcon name="icon_new-chat_outlined" />
-          </el-button>
-          <!-- 关闭生成面板 -->
-          <el-button text :disabled="busy" @click="close">
-            <MkIcon name="icon_close_outlined" />
-          </el-button>
-        </div>
+        <!-- 新建生成会话 -->
+        <el-button text :disabled="busy || !started" @click="reset" class="mr-2">
+          <MkIcon name="icon_new-chat_outlined" size="18" />
+        </el-button>
       </div>
-
-      <el-scrollbar ref="scrollbarRef" class="min-h-0 flex-1">
-        <div class="space-y-3 p-4">
+    </template>
+    <div class="flex h-full flex-col" @keydown.stop @paste.stop>
+      <el-scrollbar ref="scrollbarRef" class="min-h-0 flex-1 p-4">
+        <div class="space-y-3">
           <p v-if="!started" class="mk-gray-card text-N600">
             描述你想要的智能体，例如：“做一个产品客服，先查产品知识库回答，查不到时礼貌兜底”。AI
             会规划流程、添加节点、连线并完成配置，生成后请检查再保存。
           </p>
           <ContentList v-else :content-list="activity.activityItems.value" />
           <div v-if="busy" class="flex-align-center gap-2 text-N600">
-            <LoadingIcon :size="16" />
             <span class="mk-dotting">{{ activity.lastActivity.value || '生成中' }}</span>
           </div>
           <p v-if="status === 'stopped'" class="text-N500">已停止生成</p>
         </div>
       </el-scrollbar>
 
-      <div class="mk-input-box border transition-colors hover:border-primary focus-within:border-primary">
+      <div class="mk-input-box m-4 mt-0 border border-N350/60 shadow-lg transition-colors focus-within:border-primary/60">
         <el-input
           v-model="requirement"
           type="textarea"
@@ -197,10 +196,16 @@ defineExpose({ open, close })
           :maxlength="10000"
           @keydown="handleKeydown"
         />
-        <div class="mt-2 flex-between">
-          <el-select class="w-37!" v-model="modelId" :disabled="started" placeholder="请选择模型" filterable :teleported="false">
-            <el-option v-for="model in modelOptions" :key="model.id" :label="model.name" :value="model.id" />
-          </el-select>
+        <div class="mt-4 flex-between">
+          <SelectModel
+            class="w-50!"
+            v-model="modelId"
+            :options="modelOptions"
+            :provider-options="providerOptions"
+            :disabled="started"
+            placeholder="请选择模型"
+            teleported
+          />
           <div>
             <!-- 停止生成 -->
             <el-button v-if="busy" circle type="primary" @click="stop">
@@ -214,5 +219,5 @@ defineExpose({ open, close })
         </div>
       </div>
     </div>
-  </Teleport>
+  </MkDrawer>
 </template>