diff --git a/ui/src/views/details-demo/index.vue b/ui/src/views/details-demo/index.vue
index f80a80f192e..f69a79c5fec 100644
--- a/ui/src/views/details-demo/index.vue
+++ b/ui/src/views/details-demo/index.vue
@@ -6,7 +6,12 @@ import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
 
 defineOptions({ name: 'DetailsDemo' })
 
-// 一个 AI 对话节点的示例执行详情。
+const mode = ref<WorkflowMode>(WorkflowMode.Application)
+
+function base(type: WorkflowNodeType, index: number, name: string, overrides: Partial<ExecutionNodeDetail> = {}): ExecutionNodeDetail {
+  return { type, name, status: 200, index, run_time: 0.86, ...overrides }
+}
+
 function makeAiChat(overrides: Partial<ExecutionNodeDetail> = {}): ExecutionNodeDetail {
   return {
     type: WorkflowNodeType.AiChat,
@@ -30,12 +35,144 @@ function makeAiChat(overrides: Partial<ExecutionNodeDetail> = {}): ExecutionNode
 }
 
 const detail = ref<ExecutionNodeDetail[]>([
+  // ===== AI 对话 =====
   makeAiChat({ index: 0 }),
+
+  // ===== 判断器 =====
+  base(WorkflowNodeType.Condition, 1, '判断器', {
+    branch_name: '包含关键词「退款」',
+  }),
+
+  // ===== 指定回复 =====
+  base(WorkflowNodeType.Reply, 2, '指定回复', {
+    answer: '抱歉，该问题暂时无法回答，请换个问法。',
+  }),
+
+  // ===== 开始节点 =====
+  base(WorkflowNodeType.Start, 3, '开始', {
+    question: '帮我查一下报销流程',
+    global_fields: [{ label: '部门', value: '财务部' }],
+    document_list: [{ name: '报销制度.pdf' }],
+  }),
+
+  // ===== 问题优化 =====
+  base(WorkflowNodeType.Question, 4, '问题优化', {
+    system: '你负责优化用户问题，使其更清晰、更利于检索。',
+    history_message: [{ role: 'user', content: '报销流程' }],
+    question: 'MaxKB 的报销流程是什么？',
+    answer: '报销流程包括：提交申请 → 部门审批 → 财务打款。',
+  }),
+
+  // ===== 意图识别 =====
+  base(WorkflowNodeType.IntentNode, 5, '意图识别', {
+    system: '判断用户意图。',
+    question: '我想申请报销',
+    answer: '报销申请',
+  }),
+
+  // ===== 文档内容提取 =====
+  base(WorkflowNodeType.DocumentExtractNode, 6, '文档内容提取', {
+    content: ['## 第一章\n这里是提取出的文档正文内容。\n\n- 要点一\n- 要点二'],
+  }),
+
+  // ===== 参数提取 =====
+  base(WorkflowNodeType.ParameterExtractionNode, 7, '参数提取', {
+    request: '从用户问题中提取姓名和金额。',
+    result: { name: '张三', amount: '1200' },
+  }),
+
+  // ===== 变量赋值 =====
+  base(WorkflowNodeType.VariableAssignNode, 8, '变量赋值', {
+    result_list: [
+      { name: 'amount', input_type: 'number', input_value: '1200', output_type: 'string', output_value: '1200 元' },
+    ],
+  }),
+
+  // ===== 工具 =====
+  base(WorkflowNodeType.ToolLibCustom, 9, '自定义工具', {
+    index: 1,
+    params: JSON.stringify({ city: '上海' }),
+    result: JSON.stringify({ weather: '晴，26℃' }),
+  }),
+
+  // ===== MCP 节点 =====
+  base(WorkflowNodeType.McpNode, 10, 'MCP 工具', {
+    mcp_tool: 'github.get_repo',
+    tool_params: { owner: '1Panel-dev', repo: 'MaxKB' },
+    result: ['星标数: 15000'],
+  }),
+
+  // ===== 图片理解 =====
+  base(WorkflowNodeType.ImageUnderstandNode, 11, '图片理解', {
+    system: '识别图片内容。',
+    question: '这张图里有什么？',
+    reasoning_content: '识别到一辆红色轿车停在停车场。',
+    answer: '图中是一辆红色轿车。',
+  }),
+
+  // ===== 图片生成 =====
+  base(WorkflowNodeType.ImageGenerateNode, 12, '图片生成', {
+    question: '生成一张极简风格的 Logo。',
+    negative_prompt: '避免复杂花纹、避免文字。',
+    answer: '![logo](data:image/svg+xml;base64,)',
+  }),
+
+  // ===== 知识库检索 =====
+  base(WorkflowNodeType.SearchKnowledge, 13, '知识库检索', {
+    question: 'MaxKB 支持哪些部署方式？',
+    paragraph_list: [
+      {
+        title: '部署方式介绍',
+        content: 'MaxKB 支持 Docker、Kubernetes 与裸机部署。',
+        similarity: 0.92,
+        document_name: '部署文档.pdf',
+        knowledge_name: '产品手册',
+        knowledge_type: 'common',
+      },
+      {
+        title: '系统要求',
+        content: '最低 2 核 4G 内存，推荐 4 核 8G。',
+        similarity: 0.78,
+        document_name: '部署文档.pdf',
+        knowledge_name: '产品手册',
+        knowledge_type: 'common',
+      },
+    ],
+  }),
+
+  // ===== 多路召回 =====
+  base(WorkflowNodeType.RerankerNode, 14, '多路召回', {
+    question: 'MaxKB 的检索机制',
+    document_list: [
+      {
+        page_content: '基于关键词与向量混合检索，融合多路召回结果。',
+        metadata: { title: '混合检索', similarity: 0.85, document_name: '架构说明.md', knowledge_name: '开发文档' },
+      },
+    ],
+    result_list: [
+      {
+        page_content: '基于关键词与向量混合检索，融合多路召回结果。',
+        metadata: { title: '混合检索', relevance_score: 0.93, document_name: '架构说明.md', knowledge_name: '开发文档' },
+      },
+    ],
+  }),
+
+  // ===== 表单收集 =====
+  base(WorkflowNodeType.FormNode, 15, '表单收集', {
+    form_field_list: [
+      { field: 'name', label: '姓名', input_type: 'input', value: '' },
+      { field: 'department', label: '部门', input_type: 'input', value: '' },
+    ],
+    form_data: { name: '张三', department: '财务部' },
+    is_submit: true,
+  }),
+
+  // ===== 循环 =====
   {
     type: WorkflowNodeType.LoopNode,
     name: '循环',
     status: 200,
-    index: 1,
+    index: 16,
     run_time: 4.567,
     loop_type: 'ARRAY',
     loop_node_data: {
@@ -62,8 +199,6 @@ const detail = ref<ExecutionNodeDetail[]>([
     },
   } as ExecutionNodeDetail,
 ])
-
-const mode = ref<WorkflowMode>(WorkflowMode.Application)
 </script>
 
 <template>
diff --git a/ui/src/workflow-canvas/WORKFLOW_README.md b/ui/src/workflow-canvas/WORKFLOW_README.md
index 4803a88e6b2..fefa96ab66b 100644
--- a/ui/src/workflow-canvas/WORKFLOW_README.md
+++ b/ui/src/workflow-canvas/WORKFLOW_README.md
@@ -349,6 +349,12 @@ MkFormList 的排序、增删均以 `cloneDeep` 回写；MkTable 保留普通行
 - `NodeMenu` 使用 Element Plus Tabs 组织基础组件、工具和智能体；基础组件直接渲染 `node-menu/menu.ts` 返回的菜单分组，工具和智能体复用 Workspace 文件夹树加载可用资源。画布右上角的 `AddNode` 和节点锚点菜单均支持点击创建与拖拽到画布创建。
 - `ApplicationWorkflowView` 已接入详情加载、默认工作流、手动与自动保存、发布以及未保存退出确认。
 - `ToolWorkflowView` 已接入工具模式、工具专属默认节点、详情加载、手动保存以及未保存退出确认。
+- 执行详情已覆盖：判断器、指定回复、开始/应用、问题优化、意图识别、文档内容提取、参数提取、变量赋值、
+  变量拆分、变量聚合、工具/自定义工具、MCP、工具开始、工具工作流、循环开始/继续/退出、图片理解、
+  视频理解、图片生成、文生视频、图生视频。其中开始/应用、问题优化、意图识别为单文件；图片理解与视频理解
+  按 `application.vue`/`knowledge.vue` 拆包；多路召回等以 `ParagraphCard` 渲染段落的节点（知识库检索、
+  多路召回、文档分段、知识库写入）与表单收集节点暂未迁移。文件类型图标复用 `@/utils/icon` 的
+  `getFileIconUrl`。
 - 工具工作流调试和发布、发布历史、模板中心、完整国际化、枚举补充和其他尚未迁入的节点组件后续再接入。
 
 ## 检查
diff --git a/ui/src/workflow-canvas/nodes/application-node/details/index.vue b/ui/src/workflow-canvas/nodes/application-node/details/index.vue
new file mode 100644
index 00000000000..c0f8aa4aa81
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/application-node/details/index.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import { getFileIconUrl } from '@/utils/icon'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ApplicationNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2"><span class="mr-1 text-N600">问题:</span>{{ data.question || '-' }}</p>
+
+        <p v-for="(f, i) in data.global_fields" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ f.label }}:</span>{{ f.value }}
+        </p>
+
+        <div v-if="data.document_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">文档:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="(f, i) in data.document_list"
+              :key="i"
+              class="flex items-center rounded-md bg-white px-2 py-1"
+            >
+              <img :src="getFileIconUrl(f?.name)" alt="" width="24" />
+              <span class="ml-1 max-w-[200px] truncate" :title="f?.name">{{ f?.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="data.image_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">图片:</p>
+          <div class="flex flex-wrap gap-2">
+            <el-image
+              v-for="(f, i) in data.image_list"
+              :key="i"
+              :src="f.url"
+              fit="cover"
+              class="block h-10 w-10 rounded-md"
+              :preview-src-list="data.image_list.map((img: any) => img.url)"
+              :initial-index="i"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+            />
+          </div>
+        </div>
+
+        <div v-if="data.audio_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">音频文件:</p>
+          <audio
+            v-for="(f, i) in data.audio_list"
+            :key="i"
+            :src="f.url"
+            controls
+            class="rounded-md"
+            style="width: 300px; height: 43px"
+          />
+        </div>
+
+        <div v-if="data.video_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">视频:</p>
+          <video
+            v-for="(f, i) in data.video_list"
+            :key="i"
+            :src="f.url"
+            controls
+            autoplay
+            class="block rounded-md"
+            style="width: 170px"
+          />
+        </div>
+
+        <div v-if="data.other_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">其他:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="(f, i) in data.other_list"
+              :key="i"
+              class="flex items-center rounded-md bg-white px-2 py-1"
+            >
+              <img :src="getFileIconUrl(f?.name)" alt="" width="24" />
+              <span class="ml-1 max-w-[200px] truncate" :title="f?.name">{{ f?.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="application-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.application-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/application-node/index.ts b/ui/src/workflow-canvas/nodes/application-node/index.ts
index e6dc4bd333d..7246dea7a75 100644
--- a/ui/src/workflow-canvas/nodes/application-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/application-node/index.ts
@@ -1,4 +1,5 @@
 import ApplicationNode from './index.vue'
+import ApplicationNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class ApplicationNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.Application, model: WorkflowNodeModel, view: ApplicationNodeView }
+export default { type: WorkflowNodeType.Application, model: WorkflowNodeModel, view: ApplicationNodeView, details: ApplicationNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/condition-node/details/index.vue b/ui/src/workflow-canvas/nodes/condition-node/details/index.vue
new file mode 100644
index 00000000000..d7f89e40c95
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/condition-node/details/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ConditionNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">条件结果</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.branch_name || '-' }}</div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.ts b/ui/src/workflow-canvas/nodes/condition-node/index.ts
index 44926909941..27ad2a68724 100644
--- a/ui/src/workflow-canvas/nodes/condition-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.ts
@@ -1,4 +1,5 @@
 import ConditionNodeVue from './index.vue'
+import ConditionNodeDetail from './details/index.vue'
 import { type BaseEdgeModel, type Model } from '@logicflow/core'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
@@ -71,4 +72,4 @@ class ConditionModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.Condition, model: ConditionModel, view: ConditionNodeView }
+export default { type: WorkflowNodeType.Condition, model: ConditionModel, view: ConditionNodeView, details: ConditionNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue b/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue
new file mode 100644
index 00000000000..2d60659b3d8
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Warning } from '@element-plus/icons-vue'
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'DocumentExtractNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="flex items-center gap-1 px-3 py-2">
+        <span>输出参数</span>
+        <el-tooltip effect="dark" content="多个文件的内容会按文件顺序拼接输出" placement="right">
+          <el-icon class="text-N600"><Warning /></el-icon>
+        </el-tooltip>
+      </h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <el-scrollbar height="200">
+          <div
+            v-for="(file_content, index) in data.content"
+            :key="index"
+            class="mb-2 overflow-hidden rounded-md bg-N100"
+          >
+            <MdPreview
+              v-if="file_content"
+              editor-id="preview-only"
+              :model-value="file_content"
+              class="document-extract-content"
+              noImgZoomIn
+            />
+            <template v-else>-</template>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.document-extract-content.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/document-extract-node/index.ts b/ui/src/workflow-canvas/nodes/document-extract-node/index.ts
index 0750d5d35b4..7ae673f1cc6 100644
--- a/ui/src/workflow-canvas/nodes/document-extract-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/document-extract-node/index.ts
@@ -1,4 +1,5 @@
 import DocumentExtractNode from './index.vue'
+import DocumentExtractNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class DocumentExtractNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.DocumentExtractNode, model: WorkflowNodeModel, view: DocumentExtractNodeView }
+export default { type: WorkflowNodeType.DocumentExtractNode, model: WorkflowNodeModel, view: DocumentExtractNodeView, details: DocumentExtractNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/form-node/details/index.vue b/ui/src/workflow-canvas/nodes/form-node/details/index.vue
new file mode 100644
index 00000000000..c1387fc7f21
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/form-node/details/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import { MkDynamicsForm } from '@/components/mk-dynamics-form'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'FormNodeDetail' })
+
+const props = defineProps<{
+  data: ExecutionNodeDetail
+}>()
+
+const formData = ref(props.data?.form_data || {})
+watch(
+  () => props.data?.form_data,
+  (value) => {
+    formData.value = value || {}
+  },
+)
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">
+        输出参数
+        <span v-if="!data.is_submit" class="text-danger">(未提交)</span>
+      </h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MkDynamicsForm
+          v-model="formData"
+          :render-data="data.form_field_list"
+          :view="true"
+          label-position="top"
+        />
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/form-node/index.ts b/ui/src/workflow-canvas/nodes/form-node/index.ts
index 90a63bf82bf..44ae71d3d31 100644
--- a/ui/src/workflow-canvas/nodes/form-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/form-node/index.ts
@@ -1,4 +1,5 @@
 import FormNodeVue from './index.vue'
+import FormNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -16,4 +17,4 @@ class FormNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.FormNode, model: FormNodeModel, view: FormNodeView }
+export default { type: WorkflowNodeType.FormNode, model: FormNodeModel, view: FormNodeView, details: FormNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/image-generate-node/details/index.vue b/ui/src/workflow-canvas/nodes/image-generate-node/details/index.vue
new file mode 100644
index 00000000000..df87b7ce8c1
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/image-generate-node/details/index.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ImageGenerateNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.question || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">负向提示词</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.negative_prompt || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="image-generate-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.image-generate-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/image-generate-node/index.ts b/ui/src/workflow-canvas/nodes/image-generate-node/index.ts
index 74c71abd0c2..e21eeebf5ec 100644
--- a/ui/src/workflow-canvas/nodes/image-generate-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/image-generate-node/index.ts
@@ -1,4 +1,5 @@
 import ImageGenerateNodeVue from './index.vue'
+import ImageGenerateNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.ImageGenerateNode,
   model: WorkflowNodeModel,
   view: ImageGenerateNodeView,
+  details: ImageGenerateNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue b/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue
new file mode 100644
index 00000000000..0d6b827fe1e
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ImageToVideoNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.question || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">负向提示词</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.negative_prompt || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">首帧</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <el-image
+          v-if="typeof data.first_frame_url === 'string'"
+          :src="data.first_frame_url"
+          fit="cover"
+          class="block h-10 w-10 rounded-md"
+          :zoom-rate="1.2"
+          :max-scale="7"
+          :min-scale="0.2"
+        />
+        <div v-else-if="Array.isArray(data.first_frame_url)" class="flex flex-wrap gap-2">
+          <el-image
+            v-for="(f, i) in data.first_frame_url"
+            :key="i"
+            :src="f.url"
+            fit="cover"
+            class="block h-10 w-10 rounded-md"
+            :preview-src-list="data.first_frame_url.map((img: any) => img.url)"
+            :initial-index="i"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+          />
+        </div>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">末帧</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <el-image
+          v-if="typeof data.last_frame_url === 'string'"
+          :src="data.last_frame_url"
+          fit="cover"
+          class="block h-10 w-10 rounded-md"
+          :zoom-rate="1.2"
+          :max-scale="7"
+          :min-scale="0.2"
+        />
+        <div v-else-if="Array.isArray(data.last_frame_url)" class="flex flex-wrap gap-2">
+          <el-image
+            v-for="(f, i) in data.last_frame_url"
+            :key="i"
+            :src="f.url"
+            fit="cover"
+            class="block h-10 w-10 rounded-md"
+            :preview-src-list="data.last_frame_url.map((img: any) => img.url)"
+            :initial-index="i"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+          />
+        </div>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="image-to-video-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.image-to-video-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/image-to-video-node/index.ts b/ui/src/workflow-canvas/nodes/image-to-video-node/index.ts
index 8431373e9b4..c7aabd4537a 100644
--- a/ui/src/workflow-canvas/nodes/image-to-video-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/image-to-video-node/index.ts
@@ -1,4 +1,5 @@
 import ImageToVideoNodeVue from './index.vue'
+import ImageToVideoNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.ImageToVideoGenerateNode,
   model: WorkflowNodeModel,
   view: ImageToVideoNodeView,
+  details: ImageToVideoNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue b/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue
new file mode 100644
index 00000000000..4cfd0c906f4
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ImageUnderstandApplicationDetails' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">系统提示词</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.system || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">历史记录</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="data.history_message?.length > 0">
+          <p v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="my-1">
+            <span class="mr-1 text-N600">{{ history.role }}:</span>
+            <template v-if="Array.isArray(history.content)">
+              <span v-for="(h, i) in history.content" :key="i">
+                <el-image
+                  v-if="h.type === 'image_url'"
+                  :src="h.image_url.url"
+                  fit="cover"
+                  class="mr-2 inline-block h-10 w-10 rounded-md"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                />
+                <span v-else>{{ h.text }}<br /></span>
+              </span>
+            </template>
+            <span v-else>{{ history.content }}</span>
+          </p>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <div v-if="data.image_list?.length > 0" class="mb-2 flex flex-wrap gap-2">
+          <el-image
+            v-for="(f, i) in data.image_list"
+            :key="i"
+            :src="f.url || (f.file_id ? `./oss/file/${f.file_id}` : '')"
+            fit="cover"
+            class="block h-10 w-10 rounded-md"
+            :preview-src-list="data.image_list.map((img: any) => img.url || (img.file_id ? `./oss/file/${img.file_id}` : ''))"
+            :initial-index="i"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+          />
+        </div>
+        <div>{{ data.question || '-' }}</div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">思考过程</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.reasoning_content"
+          editor-id="preview-only"
+          :model-value="data.reasoning_content"
+          class="image-understand-reasoning"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="image-understand-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.image-understand-reasoning.md-editor),
+:deep(.image-understand-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/details/index.vue b/ui/src/workflow-canvas/nodes/image-understand-node/details/index.vue
new file mode 100644
index 00000000000..4c9e96b8c3b
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/details/index.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import ApplicationDetails from './application.vue'
+import KnowledgeDetails from './knowledge.vue'
+import { WorkflowMode } from '@/workflow-canvas/types'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ImageUnderstandNodeDetail' })
+
+withDefaults(
+  defineProps<{
+    data: ExecutionNodeDetail
+    workflowMode?: WorkflowMode
+  }>(),
+  {
+    workflowMode: WorkflowMode.Application,
+  },
+)
+
+const kv: Partial<Record<WorkflowMode, typeof ApplicationDetails>> = {
+  [WorkflowMode.Application]: ApplicationDetails,
+  [WorkflowMode.Knowledge]: KnowledgeDetails,
+}
+</script>
+
+<template>
+  <component :is="kv[workflowMode] ?? ApplicationDetails" :data="data" />
+</template>
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue b/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue
new file mode 100644
index 00000000000..f02fbe2f275
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ImageUnderstandKnowledgeDetails' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">系统提示词</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.system || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">用户提示词</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <div v-if="data.image_list?.length > 0" class="mb-2 flex flex-wrap gap-2">
+          <el-image
+            v-for="(f, i) in data.image_list"
+            :key="i"
+            :src="f.url || (f.file_id ? `./oss/file/${f.file_id}` : '')"
+            fit="cover"
+            class="block h-10 w-10 rounded-md"
+            :preview-src-list="data.image_list.map((img: any) => img.url || (img.file_id ? `./oss/file/${img.file_id}` : ''))"
+            :initial-index="i"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+          />
+        </div>
+        <div>{{ data.question || '-' }}</div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">思考过程</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.reasoning_content"
+          editor-id="preview-only"
+          :model-value="data.reasoning_content"
+          class="image-understand-reasoning"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="image-understand-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.image-understand-reasoning.md-editor),
+:deep(.image-understand-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/index.ts b/ui/src/workflow-canvas/nodes/image-understand-node/index.ts
index 8923c8faf14..e118e623df9 100644
--- a/ui/src/workflow-canvas/nodes/image-understand-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/index.ts
@@ -1,4 +1,5 @@
 import ImageUnderstandNodeVue from './index.vue'
+import ImageUnderstandNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.ImageUnderstandNode,
   model: WorkflowNodeModel,
   view: ImageUnderstandNodeView,
+  details: ImageUnderstandNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/intent-node/details/index.vue b/ui/src/workflow-canvas/nodes/intent-node/details/index.vue
new file mode 100644
index 00000000000..f23193c11cc
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/intent-node/details/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'IntentNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">系统提示词</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.system || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">历史记录</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="data.history_message?.length > 0">
+          <p v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="my-1">
+            <span class="mr-1 text-N600">{{ history.role }}:</span>
+            <span>{{ history.content }}</span>
+          </p>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.question || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="intent-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.intent-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/intent-node/index.ts b/ui/src/workflow-canvas/nodes/intent-node/index.ts
index a24d83b9d7e..39944c690d1 100644
--- a/ui/src/workflow-canvas/nodes/intent-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/intent-node/index.ts
@@ -1,4 +1,5 @@
 import IntentNodeViewVue from './index.vue'
+import IntentNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 import { randomId } from '@/utils/common'
@@ -121,4 +122,5 @@ export default {
   type: WorkflowNodeType.IntentNode,
   model: IntentNodeModel,
   view: IntentNodeView,
+  details: IntentNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/loop-break-node/details/index.vue b/ui/src/workflow-canvas/nodes/loop-break-node/details/index.vue
new file mode 100644
index 00000000000..1f3bb952184
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-break-node/details/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'LoopBreakNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p><span class="mr-1 text-N600">是否退出:</span>{{ data.is_break }}</p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/loop-break-node/index.ts b/ui/src/workflow-canvas/nodes/loop-break-node/index.ts
index c42ad5eeea2..4fc6c31821f 100644
--- a/ui/src/workflow-canvas/nodes/loop-break-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/loop-break-node/index.ts
@@ -1,4 +1,5 @@
 import LoopBreakNodeVue from './index.vue'
+import LoopBreakNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.LoopBreakNode,
   model: WorkflowNodeModel,
   view: LoopBreakNodeView,
+  details: LoopBreakNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/loop-continue-node/details/index.vue b/ui/src/workflow-canvas/nodes/loop-continue-node/details/index.vue
new file mode 100644
index 00000000000..5e7d466b71f
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-continue-node/details/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'LoopContinueNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p><span class="mr-1 text-N600">是否继续:</span>{{ data.is_continue }}</p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts b/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts
index 2846b3b8616..bf2bae73e2e 100644
--- a/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts
@@ -1,4 +1,5 @@
 import LoopContinueNodeVue from './index.vue'
+import LoopContinueNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.LoopContinueNode,
   model: WorkflowNodeModel,
   view: LoopContinueNodeView,
+  details: LoopContinueNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/loop-start-node/details/index.vue b/ui/src/workflow-canvas/nodes/loop-start-node/details/index.vue
new file mode 100644
index 00000000000..7f130e76f4e
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-start-node/details/index.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'LoopStartNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2"><span class="mr-1 text-N600">循环项:</span>{{ data.current_item }}</p>
+        <p><span class="mr-1 text-N600">循环下标:</span>{{ data.current_index }}</p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/loop-start-node/index.ts b/ui/src/workflow-canvas/nodes/loop-start-node/index.ts
index 93bddae0f73..58c224db8bf 100644
--- a/ui/src/workflow-canvas/nodes/loop-start-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/loop-start-node/index.ts
@@ -1,4 +1,5 @@
 import LoopStartNodeVue from './index.vue'
+import LoopStartNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
 import { isLoopBuiltinField, LOOP_BUILTIN_FIELDS } from './constant'
@@ -42,4 +43,5 @@ export default {
   type: WorkflowNodeType.LoopStartNode,
   model: LoopStartNodeModel,
   view: LoopStartNodeView,
+  details: LoopStartNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/mcp-node/details/index.vue b/ui/src/workflow-canvas/nodes/mcp-node/details/index.vue
new file mode 100644
index 00000000000..086405fdc1b
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/mcp-node/details/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'McpNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">工具</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2"><span class="mr-1 text-N600">工具:</span>{{ data.mcp_tool }}</p>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">工具参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(value, name) in data.tool_params" :key="name" class="mb-2">
+          <span class="mr-1 text-N600">{{ name }}:</span>{{ value }}
+        </p>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="break-all border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.result" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">result:</span>{{ f }}
+        </p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/mcp-node/index.ts b/ui/src/workflow-canvas/nodes/mcp-node/index.ts
index 6244004aabc..c6c34b07fe4 100644
--- a/ui/src/workflow-canvas/nodes/mcp-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/mcp-node/index.ts
@@ -1,4 +1,5 @@
 import McpNodeVue from './index.vue'
+import McpNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class McpNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.McpNode, model: WorkflowNodeModel, view: McpNodeView }
+export default { type: WorkflowNodeType.McpNode, model: WorkflowNodeModel, view: McpNodeView, details: McpNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/details/index.vue b/ui/src/workflow-canvas/nodes/parameter-extraction-node/details/index.vue
new file mode 100644
index 00000000000..0c0267d054d
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/details/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ParameterExtractionNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.request || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.result" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ i }}:</span>{{ f }}
+        </p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts
index 633ce27f491..ce7abaf5c38 100644
--- a/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts
@@ -1,4 +1,5 @@
 import ParameterExtractionNodeVue from './index.vue'
+import ParameterExtractionNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -16,4 +17,4 @@ class ParameterExtractionNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.ParameterExtractionNode, model: ParameterExtractionNodeModel, view: ParameterExtractionNodeView }
+export default { type: WorkflowNodeType.ParameterExtractionNode, model: ParameterExtractionNodeModel, view: ParameterExtractionNodeView, details: ParameterExtractionNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/question-node/details/index.vue b/ui/src/workflow-canvas/nodes/question-node/details/index.vue
new file mode 100644
index 00000000000..3fb2a87943d
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/question-node/details/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'QuestionNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">系统提示词</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.system || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">历史记录</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="data.history_message?.length > 0">
+          <p v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="my-1">
+            <span class="mr-1 text-N600">{{ history.role }}:</span>
+            <span>{{ history.content }}</span>
+          </p>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.question || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="question-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.question-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/question-node/index.ts b/ui/src/workflow-canvas/nodes/question-node/index.ts
index 95813405f45..df130c1bf3e 100644
--- a/ui/src/workflow-canvas/nodes/question-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/question-node/index.ts
@@ -1,4 +1,5 @@
 import QuestionNodeVue from './index.vue'
+import QuestionNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.Question,
   model: WorkflowNodeModel,
   view: QuestionNodeView,
+  details: QuestionNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/reply-node/details/index.vue b/ui/src/workflow-canvas/nodes/reply-node/details/index.vue
new file mode 100644
index 00000000000..789c7f7bfdb
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/reply-node/details/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ReplyNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">回复内容</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <el-scrollbar height="150">
+          <MdPreview
+            v-if="data.answer"
+            editor-id="preview-only"
+            :model-value="data.answer"
+            class="reply-answer"
+            noImgZoomIn
+          />
+          <template v-else>-</template>
+        </el-scrollbar>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.reply-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/reply-node/index.ts b/ui/src/workflow-canvas/nodes/reply-node/index.ts
index f19e50890ec..04603488e9c 100644
--- a/ui/src/workflow-canvas/nodes/reply-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/reply-node/index.ts
@@ -1,4 +1,5 @@
 import ReplyNode from './index.vue'
+import ReplyNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -8,4 +9,4 @@ class ReplyNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.Reply, model: WorkflowNodeModel, view: ReplyNodeView }
+export default { type: WorkflowNodeType.Reply, model: WorkflowNodeModel, view: ReplyNodeView, details: ReplyNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue b/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
new file mode 100644
index 00000000000..0113797772c
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import { getFileUrl } from '@/utils/common'
+import { getFileIconUrl } from '@/utils/icon'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'RerankerNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">检索内容</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.question || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">重排内容</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="data.document_list?.length > 0">
+          <template v-for="(paragraph, paragraphIndex) in data.document_list" :key="paragraphIndex">
+            <div class="mb-2 overflow-hidden rounded-md bg-white p-2">
+              <div class="flex-between">
+                <span class="truncate">{{ Number(paragraphIndex) + 1 }}.{{ paragraph.metadata?.title || '-' }}</span>
+                <span class="ml-2 shrink-0 text-primary">
+                  {{
+                    paragraph.metadata?.similarity != null
+                      ? Number(paragraph.metadata.similarity).toFixed(3)
+                      : ''
+                  }}
+                </span>
+              </div>
+              <el-scrollbar height="150" class="mt-1">
+                <MdPreview
+                  :model-value="paragraph.page_content || paragraph.metadata?.content || ''"
+                  class="paragraph-answer"
+                  no-img-zoom-in
+                />
+              </el-scrollbar>
+              <div
+                v-if="paragraph.metadata?.document_name?.trim()"
+                class="mt-1 flex items-center gap-1"
+              >
+                <img :src="getFileIconUrl(paragraph.metadata.document_name.trim())" alt="" width="20" />
+                <a
+                  v-if="paragraph.metadata?.source_file_id || paragraph.metadata?.source_url"
+                  :href="getFileUrl(paragraph.metadata.source_file_id) || paragraph.metadata.source_url"
+                  target="_blank"
+                  class="truncate"
+                  :title="paragraph.metadata.document_name.trim()"
+                >
+                  {{ paragraph.metadata.document_name }}
+                </a>
+                <span v-else class="truncate" :title="paragraph.metadata.document_name.trim()">
+                  {{ paragraph.metadata.document_name.trim() }}
+                </span>
+              </div>
+              <div class="mt-1 flex items-center gap-1 border-t border-dashed pt-1">
+                <KnowledgeIcon :type="paragraph.metadata?.knowledge_type" :size="18" />
+                <span class="truncate">{{ paragraph.metadata?.knowledge_name || '-' }}</span>
+              </div>
+            </div>
+          </template>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">重排结果</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="data.result_list?.length > 0">
+          <template v-for="(paragraph, paragraphIndex) in data.result_list" :key="paragraphIndex">
+            <div class="mb-2 overflow-hidden rounded-md bg-white p-2">
+              <div class="flex-between">
+                <span class="truncate">{{ Number(paragraphIndex) + 1 }}.{{ paragraph.metadata?.title || '-' }}</span>
+                <span class="ml-2 shrink-0 text-primary">
+                  {{
+                    paragraph.metadata?.relevance_score != null
+                      ? Number(paragraph.metadata.relevance_score).toFixed(3)
+                      : ''
+                  }}
+                </span>
+              </div>
+              <el-scrollbar height="150" class="mt-1">
+                <MdPreview
+                  :model-value="paragraph.page_content || paragraph.metadata?.content || ''"
+                  class="paragraph-answer"
+                  no-img-zoom-in
+                />
+              </el-scrollbar>
+              <div
+                v-if="paragraph.metadata?.document_name?.trim()"
+                class="mt-1 flex items-center gap-1"
+              >
+                <img :src="getFileIconUrl(paragraph.metadata.document_name.trim())" alt="" width="20" />
+                <a
+                  v-if="paragraph.metadata?.source_file_id || paragraph.metadata?.source_url"
+                  :href="getFileUrl(paragraph.metadata.source_file_id) || paragraph.metadata.source_url"
+                  target="_blank"
+                  class="truncate"
+                  :title="paragraph.metadata.document_name.trim()"
+                >
+                  {{ paragraph.metadata.document_name }}
+                </a>
+                <span v-else class="truncate" :title="paragraph.metadata.document_name.trim()">
+                  {{ paragraph.metadata.document_name.trim() }}
+                </span>
+              </div>
+              <div class="mt-1 flex items-center gap-1 border-t border-dashed pt-1">
+                <KnowledgeIcon :type="paragraph.metadata?.knowledge_type" :size="18" />
+                <span class="truncate">{{ paragraph.metadata?.knowledge_name || '-' }}</span>
+              </div>
+            </div>
+          </template>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.paragraph-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/reranker-node/index.ts b/ui/src/workflow-canvas/nodes/reranker-node/index.ts
index e79b98d7524..ccbbc0170da 100644
--- a/ui/src/workflow-canvas/nodes/reranker-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/reranker-node/index.ts
@@ -1,4 +1,5 @@
 import RerankerNode from './index.vue'
+import RerankerNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class RerankerNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.RerankerNode, model: WorkflowNodeModel, view: RerankerNodeView }
+export default { type: WorkflowNodeType.RerankerNode, model: WorkflowNodeModel, view: RerankerNodeView, details: RerankerNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/search-document-node/details/index.vue b/ui/src/workflow-canvas/nodes/search-document-node/details/index.vue
new file mode 100644
index 00000000000..00d6d9c0366
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/search-document-node/details/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'SearchDocumentNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2">
+          <span class="mr-1 text-N600">knowledge_list:</span>
+          {{ data.knowledge_items?.map((v: any) => v.name).join(',') }}
+        </p>
+        <p>
+          <span class="mr-1 text-N600">document_list:</span>
+          {{ data.document_items?.map((v: any) => v.name).join(',') }}
+        </p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/search-document-node/index.ts b/ui/src/workflow-canvas/nodes/search-document-node/index.ts
index 9fb1711b05e..ca2f7423b6b 100644
--- a/ui/src/workflow-canvas/nodes/search-document-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/search-document-node/index.ts
@@ -1,4 +1,5 @@
 import SearchDocumentNode from './index.vue'
+import SearchDocumentNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -16,4 +17,4 @@ class SearchDocumentNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.SearchDocument, model: SearchDocumentNodeModel, view: SearchDocumentNodeView }
+export default { type: WorkflowNodeType.SearchDocument, model: SearchDocumentNodeModel, view: SearchDocumentNodeView, details: SearchDocumentNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue b/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
new file mode 100644
index 00000000000..a3b6b365f3e
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import { getFileUrl } from '@/utils/common'
+import { getFileIconUrl } from '@/utils/icon'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'SearchKnowledgeNodeDetail' })
+
+const props = defineProps<{
+  data: ExecutionNodeDetail
+}>()
+
+interface SearchParagraph {
+  content?: string
+  document_name?: string
+  knowledge_name?: string
+  knowledge_type?: string
+  similarity?: number
+  title?: string
+}
+
+const sortedParagraphs = computed<SearchParagraph[]>(() =>
+  [...((props.data?.paragraph_list as SearchParagraph[] | undefined) || [])].sort(
+    (a, b) => (b.similarity || 0) - (a.similarity || 0),
+  ),
+)
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">检索内容</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.question || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">检索结果</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="sortedParagraphs.length > 0">
+          <div
+            v-for="(paragraph, paragraphIndex) in sortedParagraphs"
+            :key="paragraphIndex"
+            class="overflow-hidden rounded-md bg-white p-2 mb-2"
+          >
+            <div class="flex-between">
+              <span class="truncate">{{ paragraphIndex + 1 }}.{{ paragraph.title || '-' }}</span>
+              <span class="ml-2 shrink-0 text-primary">
+                {{ paragraph.similarity?.toFixed(3) }}
+              </span>
+            </div>
+            <el-scrollbar height="150" class="mt-1">
+              <MdPreview
+                :model-value="paragraph.content"
+                class="paragraph-answer"
+                no-img-zoom-in
+              />
+            </el-scrollbar>
+            <div
+              v-if="paragraph.document_name?.trim()"
+              class="mt-1 flex items-center gap-1"
+            >
+              <img :src="getFileIconUrl(paragraph.document_name.trim())" alt="" width="20" />
+              <a
+                v-if="paragraph.meta?.source_file_id || paragraph.meta?.source_url"
+                :href="getFileUrl(paragraph.meta?.source_file_id) || paragraph.meta?.source_url"
+                target="_blank"
+                class="truncate"
+                :title="paragraph.document_name.trim()"
+              >
+                {{ paragraph.document_name }}
+              </a>
+              <span v-else class="truncate" :title="paragraph.document_name.trim()">
+                {{ paragraph.document_name.trim() }}
+              </span>
+            </div>
+            <div class="mt-1 flex items-center gap-1 border-t border-dashed pt-1">
+              <KnowledgeIcon :type="paragraph.knowledge_type" :size="18" />
+              <span class="truncate">{{ paragraph.knowledge_name || '-' }}</span>
+            </div>
+          </div>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.paragraph-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/search-knowledge-node/index.ts b/ui/src/workflow-canvas/nodes/search-knowledge-node/index.ts
index d3abb64472f..a46bb00c593 100644
--- a/ui/src/workflow-canvas/nodes/search-knowledge-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/search-knowledge-node/index.ts
@@ -1,4 +1,5 @@
 import SearchKnowledgeNodeVue from './index.vue'
+import SearchKnowledgeNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.SearchKnowledge,
   model: WorkflowNodeModel,
   view: SearchKnowledgeNodeView,
+  details: SearchKnowledgeNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue b/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue
new file mode 100644
index 00000000000..33269c7f00e
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'SpeechToTextNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <div v-if="data.audio_list?.length > 0">
+          <p class="mb-2 text-N600">音频文件:</p>
+          <div class="flex flex-wrap gap-2">
+            <audio
+              v-for="(f, i) in data.audio_list"
+              :key="i"
+              :src="f.url"
+              controls
+              class="rounded-md"
+              style="width: 300px; height: 43px"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <div
+          v-for="(file_content, index) in data.content"
+          :key="index"
+          class="mb-2 overflow-hidden rounded-md bg-N100"
+        >
+          <MdPreview
+            v-if="file_content"
+            editor-id="preview-only"
+            :model-value="file_content"
+            class="speech-to-text-content"
+            noImgZoomIn
+          />
+          <template v-else>-</template>
+        </div>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.speech-to-text-content.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/speech-to-text-node/index.ts b/ui/src/workflow-canvas/nodes/speech-to-text-node/index.ts
index 7e0c6c81e7d..369b23a963e 100644
--- a/ui/src/workflow-canvas/nodes/speech-to-text-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/speech-to-text-node/index.ts
@@ -1,4 +1,5 @@
 import SpeechToTextNodeVue from './index.vue'
+import SpeechToTextNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.SpeechToTextNode,
   model: WorkflowNodeModel,
   view: SpeechToTextNodeView,
+  details: SpeechToTextNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/start-node/details/index.vue b/ui/src/workflow-canvas/nodes/start-node/details/index.vue
new file mode 100644
index 00000000000..d41d75c3568
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/start-node/details/index.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import { getFileIconUrl } from '@/utils/icon'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'StartNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2"><span class="mr-1 text-N600">问题:</span>{{ data.question || '-' }}</p>
+
+        <p v-for="(f, i) in data.global_fields" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ f.label }}:</span>{{ f.value }}
+        </p>
+
+        <div v-if="data.document_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">文档:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="(f, i) in data.document_list"
+              :key="i"
+              class="flex items-center rounded-md bg-white px-2 py-1"
+            >
+              <img :src="getFileIconUrl(f?.name)" alt="" width="24" />
+              <span class="ml-1 max-w-[200px] truncate" :title="f?.name">{{ f?.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="data.image_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">图片:</p>
+          <div class="flex flex-wrap gap-2">
+            <el-image
+              v-for="(f, i) in data.image_list"
+              :key="i"
+              :src="f.url"
+              fit="cover"
+              class="block h-10 w-10 rounded-md"
+              :preview-src-list="data.image_list.map((img: any) => img.url)"
+              :initial-index="i"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+            />
+          </div>
+        </div>
+
+        <div v-if="data.audio_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">音频文件:</p>
+          <audio
+            v-for="(f, i) in data.audio_list"
+            :key="i"
+            :src="f.url"
+            controls
+            class="rounded-md"
+            style="width: 300px; height: 43px"
+          />
+        </div>
+
+        <div v-if="data.video_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">视频:</p>
+          <video
+            v-for="(f, i) in data.video_list"
+            :key="i"
+            :src="f.url"
+            controls
+            autoplay
+            class="block rounded-md"
+            style="width: 170px"
+          />
+        </div>
+
+        <div v-if="data.other_list?.length > 0" class="mb-2">
+          <p class="mb-1 text-N600">其他:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="(f, i) in data.other_list"
+              :key="i"
+              class="flex items-center rounded-md bg-white px-2 py-1"
+            >
+              <img :src="getFileIconUrl(f?.name)" alt="" width="24" />
+              <span class="ml-1 max-w-[200px] truncate" :title="f?.name">{{ f?.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/start-node/index.ts b/ui/src/workflow-canvas/nodes/start-node/index.ts
index 921a8da7e2d..4bc42ec80c4 100644
--- a/ui/src/workflow-canvas/nodes/start-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/start-node/index.ts
@@ -1,4 +1,5 @@
 import StartNode from './index.vue'
+import StartNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -8,4 +9,4 @@ class StartNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.Start, model: WorkflowNodeModel, view: StartNodeView }
+export default { type: WorkflowNodeType.Start, model: WorkflowNodeModel, view: StartNodeView, details: StartNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/text-to-speech-node/details/index.vue b/ui/src/workflow-canvas/nodes/text-to-speech-node/details/index.vue
new file mode 100644
index 00000000000..7b71d4d7109
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/text-to-speech-node/details/index.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'TextToSpeechNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2 text-N600">文本内容:</p>
+        <MdPreview
+          v-if="data.content"
+          editor-id="preview-only"
+          :model-value="data.content"
+          class="text-to-speech-content"
+          noImgZoomIn
+        />
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p class="mb-2 text-N600">音频文件:</p>
+        <div v-if="data.answer" v-html="data.answer" />
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.text-to-speech-content.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/text-to-speech-node/index.ts b/ui/src/workflow-canvas/nodes/text-to-speech-node/index.ts
index 1cc46334c43..eeb0966f0f8 100644
--- a/ui/src/workflow-canvas/nodes/text-to-speech-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/text-to-speech-node/index.ts
@@ -1,4 +1,5 @@
 import TextToSpeechNodeVue from './index.vue'
+import TextToSpeechNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.TextToSpeechNode,
   model: WorkflowNodeModel,
   view: TextToSpeechNodeView,
+  details: TextToSpeechNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/text-to-video-node/details/index.vue b/ui/src/workflow-canvas/nodes/text-to-video-node/details/index.vue
new file mode 100644
index 00000000000..2b961c4954a
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/text-to-video-node/details/index.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'TextToVideoNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.question || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">负向提示词</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.negative_prompt || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="text-to-video-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.text-to-video-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/text-to-video-node/index.ts b/ui/src/workflow-canvas/nodes/text-to-video-node/index.ts
index c23206ba290..9dcf44043d8 100644
--- a/ui/src/workflow-canvas/nodes/text-to-video-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/text-to-video-node/index.ts
@@ -1,4 +1,5 @@
 import TextToVideoNodeVue from './index.vue'
+import TextToVideoNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.TextToVideoGenerateNode,
   model: WorkflowNodeModel,
   view: TextToVideoNodeView,
+  details: TextToVideoNodeDetail,
 }
diff --git a/ui/src/workflow-canvas/nodes/tool-custom-node/details/index.vue b/ui/src/workflow-canvas/nodes/tool-custom-node/details/index.vue
new file mode 100644
index 00000000000..e9f7dd05852
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-custom-node/details/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ToolCustomNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div v-if="data.index != 0" class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入</h5>
+      <div class="break-all border-t border-dashed px-3 py-2 text-N900">
+        {{ data.params || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出</h5>
+      <div class="break-all border-t border-dashed px-3 py-2 text-N900">
+        {{ data.result || '-' }}
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts b/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts
index a4c69fc3f74..7524e12a7fe 100644
--- a/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts
@@ -1,4 +1,5 @@
 import ToolCustomNode from './index.vue'
+import ToolCustomNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class ToolCustomNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.ToolLibCustom, model: WorkflowNodeModel, view: ToolCustomNodeView }
+export default { type: WorkflowNodeType.ToolLibCustom, model: WorkflowNodeModel, view: ToolCustomNodeView, details: ToolCustomNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/tool-lib-node/details/index.vue b/ui/src/workflow-canvas/nodes/tool-lib-node/details/index.vue
new file mode 100644
index 00000000000..99cd1a1216b
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-lib-node/details/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ToolLibNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div v-if="data.index != 0" class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入</h5>
+      <div class="break-all border-t border-dashed px-3 py-2 text-N900">
+        {{ data.params || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出</h5>
+      <div class="break-all border-t border-dashed px-3 py-2 text-N900">
+        {{ data.result || '-' }}
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts b/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts
index a9daffcdfa6..46ded32641c 100644
--- a/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts
@@ -1,4 +1,5 @@
 import ToolLibNode from './index.vue'
+import ToolLibNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class ToolLibNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.ToolLib, model: WorkflowNodeModel, view: ToolLibNodeView }
+export default { type: WorkflowNodeType.ToolLib, model: WorkflowNodeModel, view: ToolLibNodeView, details: ToolLibNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/tool-start-node/details/index.vue b/ui/src/workflow-canvas/nodes/tool-start-node/details/index.vue
new file mode 100644
index 00000000000..e8398930151
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-start-node/details/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ToolStartNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.global_fields" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ f.label }}:</span>{{ f.value }}
+        </p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/tool-start-node/index.ts b/ui/src/workflow-canvas/nodes/tool-start-node/index.ts
index e4350a4691c..a4de379a7d1 100644
--- a/ui/src/workflow-canvas/nodes/tool-start-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/tool-start-node/index.ts
@@ -1,4 +1,5 @@
 import ToolStartNode from './index.vue'
+import ToolStartNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types.ts'
 import type { Model } from '@logicflow/core'
@@ -41,4 +42,4 @@ class ToolStartNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.ToolStartNode, model: ToolStartNodeModel, view: ToolStartNodeView }
\ No newline at end of file
+export default { type: WorkflowNodeType.ToolStartNode, model: ToolStartNodeModel, view: ToolStartNodeView, details: ToolStartNodeDetail }
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/details/index.vue b/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/details/index.vue
new file mode 100644
index 00000000000..bfff588f102
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/details/index.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import ExecutionDetailContent from '@/workflow-canvas/details/index.vue'
+import { WorkflowMode } from '@/workflow-canvas/types'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'ToolWorkflowLibNodeDetail' })
+
+withDefaults(
+  defineProps<{
+    data: ExecutionNodeDetail
+    workflowMode?: WorkflowMode
+  }>(),
+  {
+    workflowMode: WorkflowMode.Tool,
+  },
+)
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.input" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ i }}:</span>{{ f }}
+        </p>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.output" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ i }}:</span>{{ f }}
+        </p>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">执行详情</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <ExecutionDetailContent :detail="data.details" :workflow-mode="workflowMode" />
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/index.ts b/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/index.ts
index 283e89277fa..53369e7a2c4 100644
--- a/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/tool-workflow-lib-node/index.ts
@@ -1,4 +1,5 @@
 import ToolWorkflowLibNode from './index.vue'
+import ToolWorkflowLibNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -8,4 +9,4 @@ class ToolWorkflowLibNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.ToolWorkflowLib, model: WorkflowNodeModel, view: ToolWorkflowLibNodeView }
\ No newline at end of file
+export default { type: WorkflowNodeType.ToolWorkflowLib, model: WorkflowNodeModel, view: ToolWorkflowLibNodeView, details: ToolWorkflowLibNodeDetail }
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/variable-aggregation-node/details/index.vue b/ui/src/workflow-canvas/nodes/variable-aggregation-node/details/index.vue
new file mode 100644
index 00000000000..3b02a9e459a
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/variable-aggregation-node/details/index.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'VariableAggregationNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+
+const strategyLabel = (strategy?: string) => {
+  if (strategy === 'first_non_null') return '返回每组变量的第一个非空值'
+  if (strategy === 'variable_to_dict') return '返回每组变量的字典（Dict）'
+  return '返回每组变量的数组（Array）'
+}
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">聚合策略</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ strategyLabel(data.strategy) }}
+      </div>
+    </div>
+
+    <div
+      v-for="(group, groupI) in data.group_list"
+      :key="groupI"
+      class="overflow-hidden rounded-md bg-N100"
+    >
+      <h5 class="px-3 py-2">{{ group.label }}输入参数</h5>
+      <el-scrollbar height="200">
+        <div class="border-t border-dashed px-3 py-2 text-N900">
+          <p v-for="(f, i) in group.variable_list" :key="i" class="mb-2">
+            <span class="mr-1 text-N600">{{ `${f.node_name}.${f.field}` }}:</span>{{ f.value }}
+          </p>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <el-scrollbar height="200">
+        <div class="border-t border-dashed px-3 py-2 text-N900">
+          <p v-for="(f, i) in data.result" :key="i" class="mb-2">
+            <span class="mr-1 text-N600">{{ i }}:</span>{{ f }}
+          </p>
+        </div>
+      </el-scrollbar>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts b/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts
index 0dba856be7d..aa6776dfb31 100644
--- a/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts
@@ -1,4 +1,5 @@
 import VariableAggregationNodeVue from './index.vue'
+import VariableAggregationNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -17,4 +18,4 @@ class VariableAggregationNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.VariableAggregationNode, model: VariableAggregationNodeModel, view: VariableAggregationNodeView }
+export default { type: WorkflowNodeType.VariableAggregationNode, model: VariableAggregationNodeModel, view: VariableAggregationNodeView, details: VariableAggregationNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/variable-assign-node/details/index.vue b/ui/src/workflow-canvas/nodes/variable-assign-node/details/index.vue
new file mode 100644
index 00000000000..6016855959c
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/variable-assign-node/details/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'VariableAssignNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.result_list" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ f.name }} ({{ f.input_type }}):</span>{{ f.input_value }}
+        </p>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.result_list" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ f.name }} ({{ f.output_type }}):</span>{{ f.output_value }}
+        </p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/variable-assign-node/index.ts b/ui/src/workflow-canvas/nodes/variable-assign-node/index.ts
index afd0467b1d0..78daa5125ea 100644
--- a/ui/src/workflow-canvas/nodes/variable-assign-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/variable-assign-node/index.ts
@@ -1,4 +1,5 @@
 import VariableAssignNodeVue from './index.vue'
+import VariableAssignNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -16,4 +17,4 @@ class VariableAssignNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.VariableAssignNode, model: VariableAssignNodeModel, view: VariableAssignNodeView }
+export default { type: WorkflowNodeType.VariableAssignNode, model: VariableAssignNodeModel, view: VariableAssignNodeView, details: VariableAssignNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/variable-splitting-node/details/index.vue b/ui/src/workflow-canvas/nodes/variable-splitting-node/details/index.vue
new file mode 100644
index 00000000000..248f9cc7192
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/variable-splitting-node/details/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'VariableSplittingNodeDetail' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输入参数</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        {{ data.request || '-' }}
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">输出参数</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <p v-for="(f, i) in data.result" :key="i" class="mb-2">
+          <span class="mr-1 text-N600">{{ i }}:</span>{{ f }}
+        </p>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/variable-splitting-node/index.ts b/ui/src/workflow-canvas/nodes/variable-splitting-node/index.ts
index 4fd045ecd10..a575096100a 100644
--- a/ui/src/workflow-canvas/nodes/variable-splitting-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/variable-splitting-node/index.ts
@@ -1,4 +1,5 @@
 import VariableSplittingNodeVue from './index.vue'
+import VariableSplittingNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 
@@ -16,4 +17,4 @@ class VariableSplittingNodeModel extends WorkflowNodeModel {
   }
 }
 
-export default { type: WorkflowNodeType.VariableSplittingNode, model: VariableSplittingNodeModel, view: VariableSplittingNodeView }
+export default { type: WorkflowNodeType.VariableSplittingNode, model: VariableSplittingNodeModel, view: VariableSplittingNodeView, details: VariableSplittingNodeDetail }
diff --git a/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue b/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue
new file mode 100644
index 00000000000..afb000200fa
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'VideoUnderstandApplicationDetails' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">系统提示词</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.system || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">历史记录</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <template v-if="data.history_message?.length > 0">
+          <p v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="my-1">
+            <span class="mr-1 text-N600">{{ history.role }}:</span>
+            <template v-if="Array.isArray(history.content)">
+              <span v-for="(h, i) in history.content" :key="i">
+                <video
+                  v-if="h.type === 'video_url'"
+                  :src="h.video_url.url"
+                  class="mr-2 inline-block rounded-md"
+                  style="width: 40px; height: 40px"
+                />
+                <span v-else>{{ h.text }}<br /></span>
+              </span>
+            </template>
+            <span v-else>{{ history.content }}</span>
+          </p>
+        </template>
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">本次对话</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <div v-if="data.video_list?.length > 0" class="mb-2 flex flex-wrap gap-2">
+          <video
+            v-for="(f, i) in data.video_list"
+            :key="i"
+            :src="f.url"
+            controls
+            autoplay
+            class="block rounded-md"
+            style="width: 100px"
+          />
+        </div>
+        <div>{{ data.question || '-' }}</div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">思考过程</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.reasoning_content"
+          editor-id="preview-only"
+          :model-value="data.reasoning_content"
+          class="video-understand-reasoning"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="video-understand-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.video-understand-reasoning.md-editor),
+:deep(.video-understand-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/video-understand-node/details/index.vue b/ui/src/workflow-canvas/nodes/video-understand-node/details/index.vue
new file mode 100644
index 00000000000..05fca5a008a
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/video-understand-node/details/index.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import ApplicationDetails from './application.vue'
+import KnowledgeDetails from './knowledge.vue'
+import { WorkflowMode } from '@/workflow-canvas/types'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'VideoUnderstandNodeDetail' })
+
+withDefaults(
+  defineProps<{
+    data: ExecutionNodeDetail
+    workflowMode?: WorkflowMode
+  }>(),
+  {
+    workflowMode: WorkflowMode.Application,
+  },
+)
+
+const kv: Partial<Record<WorkflowMode, typeof ApplicationDetails>> = {
+  [WorkflowMode.Application]: ApplicationDetails,
+  [WorkflowMode.Knowledge]: KnowledgeDetails,
+}
+</script>
+
+<template>
+  <component :is="kv[workflowMode] ?? ApplicationDetails" :data="data" />
+</template>
diff --git a/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue b/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue
new file mode 100644
index 00000000000..28145b86843
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import DetailContainer from '@/workflow-canvas/details/DetailContainer.vue'
+import BaseHeader from '@/workflow-canvas/details/BaseHeader.vue'
+import type { ExecutionNodeDetail } from '@/workflow-canvas/details/types'
+
+defineOptions({ name: 'VideoUnderstandKnowledgeDetails' })
+
+defineProps<{
+  data: ExecutionNodeDetail
+}>()
+</script>
+
+<template>
+  <DetailContainer :data="data">
+    <template #header="{ show }">
+      <BaseHeader :data="data" :show="show" show-tokens />
+    </template>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">系统提示词</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">{{ data.system || '-' }}</div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">用户提示词</h5>
+      <div class="whitespace-pre-wrap border-t border-dashed px-3 py-2 text-N900">
+        <div v-if="data.video_list?.length > 0" class="mb-2 flex flex-wrap gap-2">
+          <video
+            v-for="(f, i) in data.video_list"
+            :key="i"
+            :src="f.url"
+            controls
+            autoplay
+            class="block rounded-md"
+            style="width: 100px"
+          />
+        </div>
+        <div>{{ data.question || '-' }}</div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">思考过程</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.reasoning_content"
+          editor-id="preview-only"
+          :model-value="data.reasoning_content"
+          class="video-understand-reasoning"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-md bg-N100">
+      <h5 class="px-3 py-2">AI 回答</h5>
+      <div class="border-t border-dashed px-3 py-2 text-N900">
+        <MdPreview
+          v-if="data.answer"
+          editor-id="preview-only"
+          :model-value="data.answer"
+          class="video-understand-answer"
+          noImgZoomIn
+        />
+        <template v-else>-</template>
+      </div>
+    </div>
+  </DetailContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.video-understand-reasoning.md-editor),
+:deep(.video-understand-answer.md-editor) {
+  background: transparent;
+  height: auto;
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/video-understand-node/index.ts b/ui/src/workflow-canvas/nodes/video-understand-node/index.ts
index d386e05204c..82abb0e585b 100644
--- a/ui/src/workflow-canvas/nodes/video-understand-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/video-understand-node/index.ts
@@ -1,4 +1,5 @@
 import VideoUnderstandNodeVue from './index.vue'
+import VideoUnderstandNodeDetail from './details/index.vue'
 import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
 
@@ -12,4 +13,5 @@ export default {
   type: WorkflowNodeType.VideoUnderstandNode,
   model: WorkflowNodeModel,
   view: VideoUnderstandNodeView,
+  details: VideoUnderstandNodeDetail,
 }