diff --git a/ui/src/api/admin/workspace/application/chat-log.ts b/ui/src/api/admin/workspace/application/chat-log.ts
index b877a8a49a9..2dfaf6371d3 100644
--- a/ui/src/api/admin/workspace/application/chat-log.ts
+++ b/ui/src/api/admin/workspace/application/chat-log.ts
@@ -1,6 +1,6 @@
 import { del, get, post, postExportExcel, put } from '../../core/request'
 import type { ParamsPage, ResponsePage } from '../../core/types'
-import type { ChatLog, ChatLogAddKnowledgePayload, Dict } from '@/api/types'
+import type { ChatLog, ChatLogAddKnowledgePayload, ChatLogRecord, Dict } from '@/api/types'
 import { getWorkspaceId } from '@/utils/resource-context'
 
 const getPrefix = () => `/workspace/${getWorkspaceId()}/application`
@@ -27,7 +27,7 @@ const postChatLogAddKnowledge = (applicationId: string, data: ChatLogAddKnowledg
 
 /** 分页获取对话中的聊天记录。 */
 const getChatRecordLog = (applicationId: string, chatId: string, page: ParamsPage, orderAsc = true) =>
-  get<ResponsePage<Dict<unknown>>>(`${getPrefix()}/${applicationId}/chat/${chatId}/chat_record/${page.currentPage}/${page.pageSize}`, {
+  get<ResponsePage<ChatLogRecord>>(`${getPrefix()}/${applicationId}/chat/${chatId}/chat_record/${page.currentPage}/${page.pageSize}`, {
     order_asc: orderAsc,
   })
 
diff --git a/ui/src/api/types/chat-log.ts b/ui/src/api/types/chat-log.ts
index 2e5585fb9cc..7f2cd3ab77b 100644
--- a/ui/src/api/types/chat-log.ts
+++ b/ui/src/api/types/chat-log.ts
@@ -1,4 +1,5 @@
 import type { CHAT_LOG_SOURCE } from '@/api/enums'
+import type { Dict } from './common'
 
 export type ChatLogSource = (typeof CHAT_LOG_SOURCE)[keyof typeof CHAT_LOG_SOURCE]
 
@@ -22,3 +23,17 @@ export interface ChatLog {
   source?: { type?: string } | null
   update_time: string
 }
+
+/** 对话日志中的单条问答记录，仅列出前端使用的字段。 */
+export interface ChatLogRecord {
+  id: string
+  /** 提问内容项 */
+  question: Dict<unknown>
+  /** 回答内容项列表 */
+  messages: Dict<unknown>[]
+  message_tokens?: number
+  answer_tokens?: number
+  run_time?: number
+  paragraph_list?: Dict<unknown>[]
+  execution_details?: Dict<unknown>[]
+}
diff --git a/ui/src/conversation-panel/components/log-message-list/index.ts b/ui/src/conversation-panel/components/log-message-list/index.ts
new file mode 100644
index 00000000000..65e6dabee3e
--- /dev/null
+++ b/ui/src/conversation-panel/components/log-message-list/index.ts
@@ -0,0 +1,84 @@
+import { ref, inject, type InjectionKey } from 'vue'
+import type { ChatLogRecord } from '@/api/types'
+import type { ChatMessage, ChatRecordMeta } from '../../core/types'
+
+// 只读会话记录(如对话日志):只分页拉取历史记录,不发送、不续跑、不流式。
+// 与 message-list 刻意不共用 store 约定,也不注入 MESSAGE_LIST_KEY,表单等内容项因此自动只读。
+export interface LogMessageListDeps {
+  pageRecords: (chatId: string, page: number, size: number) => Promise<{ records: ChatLogRecord[] }>
+  getChatId: () => string
+}
+
+// 从后端 chat_record(reset_chat_record 结构)提取底部信息栏数据
+const buildRecordMeta = (raw: ChatLogRecord): ChatRecordMeta => ({
+  messageTokens: raw.message_tokens || 0,
+  answerTokens: raw.answer_tokens || 0,
+  runTime: raw.run_time || 0,
+  knowledgeCount: (raw.paragraph_list || []).length,
+  executionDetails: raw.execution_details || [],
+})
+
+export function createLogMessageListStore(deps: LogMessageListDeps) {
+  const { pageRecords, getChatId } = deps
+
+  const messages = ref<ChatMessage[]>([])
+  const loading = ref(false)
+
+  const pageSize = 20
+  const currentPage = ref(1)
+  const hasMore = ref(true)
+
+  // 接口按最新在前分页:页内 reverse 成正序,更旧的页拼到前面
+  const loadMessages = async (cid: string, page = 1) => {
+    loading.value = true
+    try {
+      const res = await pageRecords(cid, page, pageSize)
+      const records = [...(res?.records || [])].reverse()
+      const result = records.flatMap((record): ChatMessage[] => [
+        { role: 'USER', content: [record.question], id: record.id + '_USER' },
+        {
+          role: 'ASSISTANT',
+          content: record.messages,
+          id: record.id + '_ASSISTANT',
+          recordId: record.id,
+          record: buildRecordMeta(record),
+        },
+      ])
+      messages.value = page === 1 ? result : [...result, ...messages.value]
+      currentPage.value = page
+      hasMore.value = records.length >= pageSize
+    } catch {
+      // 静默处理
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 切换记录时由使用方主动调用。先清空再拉:无消息时的 loading 即首页加载
+  const load = async () => {
+    const cid = getChatId()
+    messages.value = []
+    currentPage.value = 1
+    hasMore.value = true
+    if (!cid) return
+    await loadMessages(cid, 1)
+  }
+
+  const loadMore = async () => {
+    const cid = getChatId()
+    if (!hasMore.value || loading.value || !cid) return
+    await loadMessages(cid, currentPage.value + 1)
+  }
+
+  return { messages, loading, hasMore, load, loadMore }
+}
+
+export type LogMessageListStore = ReturnType<typeof createLogMessageListStore>
+
+export const LOG_MESSAGE_LIST_KEY: InjectionKey<LogMessageListStore> = Symbol('log-message-list')
+
+export function useLogMessageListStore(): LogMessageListStore {
+  const store = inject(LOG_MESSAGE_LIST_KEY)
+  if (!store) throw new Error('useLogMessageListStore 必须在提供 LOG_MESSAGE_LIST_KEY 的视图内使用')
+  return store
+}
diff --git a/ui/src/conversation-panel/components/log-message-list/index.vue b/ui/src/conversation-panel/components/log-message-list/index.vue
new file mode 100644
index 00000000000..5e571a17ed2
--- /dev/null
+++ b/ui/src/conversation-panel/components/log-message-list/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <!-- 只读会话记录:首页加载整块遮罩,上滑加载更多时顶部小转圈 -->
+  <div ref="msgBoxRef" v-loading="fullLoading" class="log-message-list" @scroll="onScroll">
+    <template v-if="messages.length > 0">
+      <div v-if="loading" class="log-message-list__more">
+        <el-icon class="is-loading" :size="18"><LoadingIcon /></el-icon>
+      </div>
+
+      <div
+        v-for="(msg, i) in messages"
+        :key="msg.id || i"
+        :class="['msg-row', msg.role === 'USER' ? 'user' : 'assistant']"
+      >
+        <ContentList :content-list="msg.content" />
+        <!-- 助手消息底部信息栏(知识来源/执行详情/tokens/耗时) -->
+        <MessageFooter v-if="msg.role === 'ASSISTANT' && msg.record" :message="msg" />
+      </div>
+    </template>
+
+    <el-empty v-else-if="!loading" class="flex-1" description="暂无对话记录" :image-size="80" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { Loading as LoadingIcon } from '@element-plus/icons-vue'
+import ContentList from '../content-list/index.vue'
+import MessageFooter from '../message-footer/index.vue'
+import { Scroll } from '../../core/stream'
+import { useLogMessageListStore } from './index'
+
+const { messages, loading, hasMore, loadMore } = useLogMessageListStore()
+
+// 整块遮罩:load 会先清空消息,故无消息时的加载即首页加载
+const fullLoading = computed(() => loading.value && messages.value.length === 0)
+
+const msgBoxRef = ref<HTMLElement | null>(null)
+let scroll: Scroll | null = null
+onMounted(() => {
+  if (msgBoxRef.value) scroll = new Scroll(msgBoxRef.value)
+})
+
+// 首页加载完成(消息从无到有)→ 定位到最新一条
+watch(
+  () => messages.value.length,
+  (len, prevLen) => {
+    if (len > 0 && !prevLen) nextTick(() => scroll?.forceBottom())
+  },
+)
+
+// 上滑到顶加载更早的记录,并保持当前阅读位置不跳动
+const onScroll = async () => {
+  const el = msgBoxRef.value
+  if (!el || el.scrollTop > 60 || !hasMore.value || loading.value) return
+  const prevHeight = el.scrollHeight
+  await loadMore()
+  await nextTick()
+  el.scrollTop += el.scrollHeight - prevHeight
+}
+</script>
+
+<style scoped lang="scss">
+.log-message-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px 12px;
+  scrollbar-width: thin;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.log-message-list__more {
+  display: flex;
+  justify-content: center;
+  padding: 4px 0 10px;
+  color: var(--t3, #909399);
+}
+
+.msg-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+  max-width: 680px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.msg-row.user {
+  align-items: flex-end;
+  flex-direction: row-reverse;
+}
+.msg-row.assistant {
+  align-items: flex-start;
+}
+</style>
diff --git a/ui/src/conversation-panel/components/message-input/index.ts b/ui/src/conversation-panel/components/message-input/index.ts
index 4de83ab5a7f..1d7a0986896 100644
--- a/ui/src/conversation-panel/components/message-input/index.ts
+++ b/ui/src/conversation-panel/components/message-input/index.ts
@@ -32,7 +32,8 @@ export interface MessageInputDeps {
   composerResetSignal: Ref<number>
   // 来自 message-list
   messages: Ref<ChatMessage[]>
-  loading: Ref<boolean>
+  /** 对话加载(回答生成中):只读,由 message-list 维护 */
+  streamLoading: Readonly<Ref<boolean>>
   sendMessage: (opts: SendMessageOptions) => void
   uploadFile: (file: File, chatId: string, onProgress?: (percent: number) => void) => Promise<string>
   stop: () => void
@@ -47,7 +48,7 @@ const UPLOAD_PROGRESS_PENDING_MAX = 95
  * message-input 组件 store:本组件独有——输入内容 + 暂存文件 + 发送。
  */
 export function createMessageInputStore(deps: MessageInputDeps) {
-  const { conversations, getChatId, renameChat, composerResetSignal, messages, loading, sendMessage, uploadFile, stop } = deps
+  const { conversations, getChatId, renameChat, composerResetSignal, messages, streamLoading, sendMessage, uploadFile, stop } = deps
   const disabled = computed(() => deps.disabled?.value ?? false)
 
   // 输入状态与附件限制
@@ -62,7 +63,7 @@ export function createMessageInputStore(deps: MessageInputDeps) {
 
   const placeholder = computed(() => {
     if (disabled.value) return '暂无可用智能体'
-    return loading.value ? '正在回复中...' : '输入消息...'
+    return streamLoading.value ? '正在回复中...' : '输入消息...'
   })
   // 附件上传完成前不能发送，否则消息中的附件没有地址
   const isUploading = computed(() => fileList.value.some((attachment) => attachment.uploading))
@@ -70,7 +71,7 @@ export function createMessageInputStore(deps: MessageInputDeps) {
     () =>
       !disabled.value &&
       (question.value.trim().length > 0 || fileList.value.length > 0) &&
-      !loading.value &&
+      !streamLoading.value &&
       !sending.value &&
       !isUploading.value,
   )
@@ -179,7 +180,6 @@ export function createMessageInputStore(deps: MessageInputDeps) {
       clearFiles()
     } catch (e) {
       console.error('send failed:', e)
-      loading.value = false
     } finally {
       sending.value = false
     }
@@ -200,7 +200,7 @@ export function createMessageInputStore(deps: MessageInputDeps) {
     maxFiles,
     maxSizeMB,
     acceptList,
-    loading,
+    streamLoading,
     disabled,
     placeholder,
     canSend,
diff --git a/ui/src/conversation-panel/components/message-input/index.vue b/ui/src/conversation-panel/components/message-input/index.vue
index 12ac2e11bb6..b3d2b0aba26 100644
--- a/ui/src/conversation-panel/components/message-input/index.vue
+++ b/ui/src/conversation-panel/components/message-input/index.vue
@@ -5,7 +5,7 @@ import { formatFileSize } from '@/utils/number'
 import { inputShortcut } from '../../core/shortcuts'
 import { useMessageInputStore } from './index'
 
-const { question, fileList, maxFiles, maxSizeMB, acceptList, loading, disabled, placeholder, canSend, imageFiles, addFiles, removeFile, send, stop } =
+const { question, fileList, maxFiles, maxSizeMB, acceptList, streamLoading, disabled, placeholder, canSend, imageFiles, addFiles, removeFile, send, stop } =
   useMessageInputStore()
 
 // 选择和粘贴附件统一交给输入 Store 处理。
@@ -117,13 +117,13 @@ const handleKeydown = (event: KeyboardEvent) => {
           </div>
         </template>
         <!-- 上传文件 -->
-        <el-button text :disabled="disabled || loading || fileList.length >= maxFiles" @click="fileInputRef?.click()">
+        <el-button text :disabled="disabled || streamLoading || fileList.length >= maxFiles" @click="fileInputRef?.click()">
           <MkIcon name="icon_attachment_outlined" :size="18" class="text-N900!" />
         </el-button>
       </MkTooltip>
       <el-divider direction="vertical" class="ml-3! mr-4!" />
       <!-- 停止回复 -->
-      <el-button v-if="loading" circle type="primary" @click="stop">
+      <el-button v-if="streamLoading" circle type="primary" @click="stop">
         <MkIcon name="icon_square_filled" />
       </el-button>
       <!-- 发送 -->
diff --git a/ui/src/conversation-panel/components/message-list/index.ts b/ui/src/conversation-panel/components/message-list/index.ts
index 9603794224d..da3f22f645a 100644
--- a/ui/src/conversation-panel/components/message-list/index.ts
+++ b/ui/src/conversation-panel/components/message-list/index.ts
@@ -30,6 +30,7 @@ export function createMessageListStore(deps: MessageListDeps) {
 
   const messages = ref<ChatMessage[]>([])
   const loading = ref(false)
+  const streamLoading = ref(false)
 
   // ── 分页 ─────────────────────────────────────────────
   const pageSize = 20
@@ -103,8 +104,10 @@ export function createMessageListStore(deps: MessageListDeps) {
   let currentStream: ConversationStream | null = null
   const closeStream = () => {
     if (currentStream) {
+      // 主动取消的流不会回调 onComplete,需在此复位对话加载
       currentStream.cancel()
       currentStream = null
+      streamLoading.value = false
       return true
     }
     return false
@@ -131,6 +134,7 @@ export function createMessageListStore(deps: MessageListDeps) {
     onComplete: (e?: any) => void,
   ) => {
     closeStream()
+    streamLoading.value = true
     request()
       .then((response: any) => {
         currentStream = new ConversationStream(
@@ -141,12 +145,16 @@ export function createMessageListStore(deps: MessageListDeps) {
           },
           (e) => {
             currentStream = null
+            streamLoading.value = false
             onComplete(e)
           },
         )
         currentStream.start()
       })
-      .catch((e) => onComplete(e ?? new Error('stream request failed')))
+      .catch((e) => {
+        streamLoading.value = false
+        onComplete(e ?? new Error('stream request failed'))
+      })
   }
 
   // ── 发送 / 续跑 ─────────────────────────────────────
@@ -173,7 +181,6 @@ export function createMessageListStore(deps: MessageListDeps) {
     if (opts.chatRecordId) payload.chat_record_id = opts.chatRecordId
     if (opts.chunkId) payload.chunk_id = opts.chunkId
 
-    loading.value = true
     runStream(
       () => chatMessage(cid, payload),
       (chunk) => {
@@ -183,7 +190,6 @@ export function createMessageListStore(deps: MessageListDeps) {
       },
       (e) => {
         target.write_ed = true
-        loading.value = false
         if (!e) getChatRecord(target, cid)
         opts.onComplete?.(e)
       },
@@ -203,17 +209,15 @@ export function createMessageListStore(deps: MessageListDeps) {
   }
 
   // ── 切换会话:由 conversation-list 主动调用(list 先写好 currentChatId 再调本函数)──
+  // 先清空再拉:无消息时的 loading 即首页加载(整块遮罩),有消息时的 loading 即加载更多
   const load = async () => {
     const cid = getChatId()
     closeStream()
-    if (!cid) {
-      resetMessages()
-      return
-    }
+    resetMessages()
+    if (!cid) return
     await loadMessages(cid, 1)
     const lastMsg = messages.value[messages.value.length - 1]
     if (!lastMsg || (lastMsg.content && lastMsg.content.length > 0)) return
-    loading.value = true
     const recordId = lastMsg.id.replace('_USER', '').replace('_ASSISTANT', '')
     runStream(
       () => resumeMessage(cid, recordId),
@@ -230,7 +234,6 @@ export function createMessageListStore(deps: MessageListDeps) {
             getChatRecord(m, cid)
           }
         }
-        loading.value = false
       },
     )
   }
@@ -238,6 +241,7 @@ export function createMessageListStore(deps: MessageListDeps) {
   return {
     messages,
     loading,
+    streamLoading,
     hasMore,
     load,
     loadMore,
diff --git a/ui/src/conversation-panel/components/message-list/index.vue b/ui/src/conversation-panel/components/message-list/index.vue
index b25583c30c4..7253a262c38 100644
--- a/ui/src/conversation-panel/components/message-list/index.vue
+++ b/ui/src/conversation-panel/components/message-list/index.vue
@@ -1,13 +1,11 @@
 <template>
-  <div ref="msgBoxRef" class="message-list" @scroll="onScroll">
-    <div v-if="messages.length === 0" class="welcome">
-      <slot name="welcome">
-        <p class="welcome-title">{{ appName }}</p>
-        <p class="welcome-sub">有什么可以帮你的？</p>
-      </slot>
-    </div>
+  <!-- 接口加载:无消息时(首页)整块遮罩,有消息时(加载更多)顶部小转圈;对话加载:底部小点 -->
+  <div ref="msgBoxRef" v-loading="fullLoading" class="message-list" @scroll="onScroll">
+    <template v-if="messages.length > 0">
+      <div v-if="loading" class="message-list__more">
+        <el-icon class="is-loading" :size="18"><LoadingIcon /></el-icon>
+      </div>
 
-    <template v-else>
       <div
         v-for="(msg, i) in messages"
         :key="msg.id || i"
@@ -18,15 +16,23 @@
         <MessageFooter v-if="msg.role === 'ASSISTANT' && (msg.write_ed || msg.record)" :message="msg" />
       </div>
 
-      <div v-if="loading" class="msg-row assistant">
+      <div v-if="streamLoading" class="msg-row assistant">
         <Loading :size="18" />
       </div>
     </template>
+
+    <div v-else-if="!loading" class="welcome">
+      <slot name="welcome">
+        <p class="welcome-title">{{ appName }}</p>
+        <p class="welcome-sub">有什么可以帮你的？</p>
+      </slot>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { Loading as LoadingIcon } from '@element-plus/icons-vue'
 import ContentList from '../content-list/index.vue'
 import MessageFooter from '../message-footer/index.vue'
 import Loading from '../../loading/index.vue'
@@ -35,7 +41,10 @@ import { useMessageListStore } from './index'
 
 defineProps<{ appName?: string }>()
 
-const { messages, loading, hasMore, loadMore, onStreamProgress } = useMessageListStore()
+const { messages, loading, streamLoading, hasMore, loadMore, onStreamProgress } = useMessageListStore()
+
+// 整块遮罩:切换会话会先清空消息,故无消息时的接口加载即首页加载
+const fullLoading = computed(() => loading.value && messages.value.length === 0)
 
 const msgBoxRef = ref<HTMLElement | null>(null)
 let scroll: Scroll | null = null
@@ -73,6 +82,13 @@ const onScroll = () => {
   align-items: center;
 }
 
+.message-list__more {
+  display: flex;
+  justify-content: center;
+  padding: 4px 0 10px;
+  color: var(--t3, #909399);
+}
+
 .welcome {
   flex: 1;
   display: flex;
diff --git a/ui/src/conversation-panel/view/chat/index.ts b/ui/src/conversation-panel/view/chat/index.ts
index c9cd0ab5c5f..35de6315bcb 100644
--- a/ui/src/conversation-panel/view/chat/index.ts
+++ b/ui/src/conversation-panel/view/chat/index.ts
@@ -84,7 +84,7 @@ export function createChatConversation(routing: ChatConversationRouting = useApp
     renameChat: list.renameChat,
     composerResetSignal: list.composerResetSignal,
     messages: msgs.messages,
-    loading: msgs.loading,
+    streamLoading: msgs.streamLoading,
     sendMessage: msgs.sendMessage,
     uploadFile: msgs.uploadFile,
     stop: msgs.stop,
diff --git a/ui/src/conversation-panel/view/debug/index.ts b/ui/src/conversation-panel/view/debug/index.ts
index 08253ab7f78..ed2d1a01c07 100644
--- a/ui/src/conversation-panel/view/debug/index.ts
+++ b/ui/src/conversation-panel/view/debug/index.ts
@@ -52,7 +52,7 @@ export function createDebugConversation(): ConversationBundle {
     renameChat: list.renameChat,
     composerResetSignal: list.composerResetSignal,
     messages: msgs.messages,
-    loading: msgs.loading,
+    streamLoading: msgs.streamLoading,
     sendMessage: msgs.sendMessage,
     uploadFile: msgs.uploadFile,
     stop: msgs.stop,
diff --git a/ui/src/conversation-panel/view/log/index.vue b/ui/src/conversation-panel/view/log/index.vue
new file mode 100644
index 00000000000..ac1a9a41e4b
--- /dev/null
+++ b/ui/src/conversation-panel/view/log/index.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { provide, watch } from 'vue'
+import ChatLogApi from '@/api/admin/workspace/application/chat-log'
+import ConversationLayout from '../../core/layout/index.vue'
+import LogMessageList from '../../components/log-message-list/index.vue'
+import ExecutionDetail from '../../right-sidebar/execution-detail/index.vue'
+import { LOG_MESSAGE_LIST_KEY, createLogMessageListStore } from '../../components/log-message-list/index'
+import { EXECUTION_DETAIL_KEY, createExecutionDetailStore } from '../../right-sidebar/execution-detail/index'
+
+defineOptions({ name: 'LogConversation' })
+
+const props = defineProps<{ chatId: string; applicationId?: string }>()
+
+// 只读日志:只读消息列表 + 执行详情,无会话列表、无输入框。
+// 不注入 MESSAGE_LIST_KEY,表单等内容项拿不到发送能力即自动只读。
+const msgs = createLogMessageListStore({
+  // 降序取(最新在前),store 页内 reverse 成正序、上滑加载更旧
+  pageRecords: (cid, p, s) =>
+    ChatLogApi.getChatRecordLog(props.applicationId || '', cid, { currentPage: p, pageSize: s }, false),
+  getChatId: () => props.chatId,
+})
+const detail = createExecutionDetailStore()
+
+provide(LOG_MESSAGE_LIST_KEY, msgs)
+provide(EXECUTION_DETAIL_KEY, detail)
+
+// 切换日志(抽屉内上一个/下一个)时收起执行详情并重新加载
+watch(
+  () => props.chatId,
+  () => {
+    detail.closeRightSide()
+    msgs.load()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <ConversationLayout
+    :left-open="false"
+    :right-open="detail.rightSideOpen.value"
+    right-mode="drawer"
+    @mask-click="detail.closeRightSide()"
+  >
+    <template #main>
+      <main class="mk-conversation-main">
+        <LogMessageList />
+      </main>
+    </template>
+    <template #right><ExecutionDetail /></template>
+  </ConversationLayout>
+</template>
+
+<style lang="scss">
+@use '../../index.scss';
+</style>
diff --git a/ui/src/views/application-detail/chat-log/ChatLogDetailDrawer.vue b/ui/src/views/application-detail/chat-log/ChatLogDetailDrawer.vue
index 8ed68eab78d..6f517c9bfcf 100644
--- a/ui/src/views/application-detail/chat-log/ChatLogDetailDrawer.vue
+++ b/ui/src/views/application-detail/chat-log/ChatLogDetailDrawer.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import type { ChatLog } from '@/api/types'
+import LogConversation from '@/conversation-panel/view/log/index.vue'
 
 const props = defineProps<{
   chatLog: ChatLog
@@ -8,6 +10,9 @@ const props = defineProps<{
   previousDisabled: boolean
   nextDisabled: boolean
 }>()
+
+const route = useRoute()
+const applicationId = computed(() => String(route.params.applicationId ?? ''))
 const emit = defineEmits<{ previous: []; next: []; closed: [] }>()
 
 // 对话详情抽屉的打开与关闭
@@ -35,11 +40,14 @@ defineExpose({ open, close })
 </script>
 
 <template>
-  <MkDrawer v-model="visible" size="60%" @close="close" @closed="emit('closed')">
+  <MkDrawer v-model="visible" size="60%" content-class="h-full !p-0" @close="close" @closed="emit('closed')">
     <template #header>
       <h4 class="min-w-0 truncate" :title="props.chatLog.abstract">{{ props.chatLog.abstract || '对话详情' }}</h4>
     </template>
-    <div v-loading="props.loading">对话内容后续接入</div>
+    <div v-loading="props.loading" class="h-full">
+      <!-- 只读会话面板:展示该日志的历史对话与执行详情,无输入框 -->
+      <LogConversation :chat-id="props.chatLog.id" :application-id="applicationId" />
+    </div>
     <template #footer>
       <!-- 浏览上一个对话日志 -->
       <el-button plain :disabled="props.previousDisabled || props.loading" @click="handlePrevious">上一个</el-button>