From 51495ba5838e3c8bccfaa2c61df84cf58a46eea6 Mon Sep 17 00:00:00 2001
From: Acbox <acbox0328@gmail.com>
Date: Fri, 10 Apr 2026 16:44:44 +0800
Subject: [PATCH] feat: ui message

---
 .../composables/api/useChat.message-api.ts    |   21 +
 apps/web/src/composables/api/useChat.types.ts |   97 +-
 .../src/composables/api/useChat.ws.test.ts    |   74 ++
 apps/web/src/composables/api/useChat.ws.ts    |   21 +-
 .../pages/home/components/message-item.vue    |  131 +-
 .../pages/home/components/tool-call-exec.vue  |   24 +-
 .../home/components/tool-call-generic.vue     |   32 +-
 .../pages/home/composables/useMediaGallery.ts |   19 +-
 apps/web/src/store/chat-list.ts               | 1076 ++++++-----------
 apps/web/src/store/chat-list.utils.test.ts    |   79 ++
 apps/web/src/store/chat-list.utils.ts         |   38 +
 internal/agent/agent.go                       |    8 +
 internal/agent/stream.go                      |   32 +-
 internal/conversation/uimessage.go            |   96 ++
 internal/conversation/uimessage_convert.go    |  609 ++++++++++
 internal/conversation/uimessage_stream.go     |  176 +++
 internal/conversation/uimessage_test.go       |  277 +++++
 internal/handlers/local_channel.go            |   99 +-
 internal/handlers/message.go                  |    6 +
 19 files changed, 2141 insertions(+), 774 deletions(-)
 create mode 100644 apps/web/src/composables/api/useChat.ws.test.ts
 create mode 100644 apps/web/src/store/chat-list.utils.test.ts
 create mode 100644 apps/web/src/store/chat-list.utils.ts
 create mode 100644 internal/conversation/uimessage.go
 create mode 100644 internal/conversation/uimessage_convert.go
 create mode 100644 internal/conversation/uimessage_stream.go
 create mode 100644 internal/conversation/uimessage_test.go

diff --git a/apps/web/src/composables/api/useChat.message-api.ts b/apps/web/src/composables/api/useChat.message-api.ts
index 89a927e5..f5cdf81b 100644
--- a/apps/web/src/composables/api/useChat.message-api.ts
+++ b/apps/web/src/composables/api/useChat.message-api.ts
@@ -7,6 +7,7 @@ import type {
   Message,
   MessageStreamEvent,
   StreamEventHandler,
+  UITurn,
 } from './useChat.types'
 import { parseStreamPayload, readSSEStream } from './useChat.sse'
 
@@ -28,6 +29,26 @@ export async function fetchMessages(
   return (data as unknown as { items?: Message[] })?.items ?? []
 }
 
+export async function fetchMessagesUI(
+  botId: string,
+  sessionId?: string,
+  options?: FetchMessagesOptions,
+): Promise<UITurn[]> {
+  const response = await client.get({
+    url: '/bots/{bot_id}/messages',
+    path: { bot_id: botId },
+    query: {
+      limit: options?.limit ?? 30,
+      format: 'ui',
+      ...(options?.before?.trim() ? { before: options.before.trim() } : {}),
+      ...(sessionId?.trim() ? { session_id: sessionId.trim() } : {}),
+    },
+    throwOnError: true,
+  })
+
+  return (response.data as { items?: UITurn[] } | undefined)?.items ?? []
+}
+
 export interface SendMessageOverrides {
   modelId?: string
   reasoningEffort?: string
diff --git a/apps/web/src/composables/api/useChat.types.ts b/apps/web/src/composables/api/useChat.types.ts
index c31e4d59..c8248424 100644
--- a/apps/web/src/composables/api/useChat.types.ts
+++ b/apps/web/src/composables/api/useChat.types.ts
@@ -50,7 +50,7 @@ export interface StreamEvent {
   type?:
     | 'text_start' | 'text_delta' | 'text_end'
     | 'reasoning_start' | 'reasoning_delta' | 'reasoning_end'
-    | 'tool_call_start' | 'tool_call_end'
+    | 'tool_call_start' | 'tool_call_progress' | 'tool_call_end'
     | 'attachment_delta' | 'reaction_delta'
     | 'agent_start' | 'agent_end' | 'agent_abort'
     | 'processing_started' | 'processing_completed' | 'processing_failed'
@@ -59,6 +59,7 @@ export interface StreamEvent {
   toolCallId?: string
   toolName?: string
   input?: unknown
+  progress?: unknown
   result?: unknown
   attachments?: Array<Record<string, unknown>>
   error?: string
@@ -88,3 +89,97 @@ export interface ChatAttachment {
   mime?: string
   name?: string
 }
+
+export interface UIAttachment {
+  id?: string
+  type: string
+  path?: string
+  url?: string
+  base64?: string
+  name?: string
+  content_hash?: string
+  bot_id?: string
+  mime?: string
+  size?: number
+  storage_key?: string
+  metadata?: Record<string, unknown>
+}
+
+export interface UITextMessage {
+  id: number
+  type: 'text'
+  content: string
+}
+
+export interface UIReasoningMessage {
+  id: number
+  type: 'reasoning'
+  content: string
+}
+
+export interface UIToolMessage {
+  id: number
+  type: 'tool'
+  name: string
+  input: unknown
+  output?: unknown
+  tool_call_id: string
+  running: boolean
+  progress?: unknown[]
+}
+
+export interface UIAttachmentsMessage {
+  id: number
+  type: 'attachments'
+  attachments: UIAttachment[]
+}
+
+export type UIMessage = UITextMessage | UIReasoningMessage | UIToolMessage | UIAttachmentsMessage
+
+export interface UIUserTurn {
+  role: 'user'
+  text: string
+  attachments?: UIAttachment[]
+  timestamp: string
+  platform?: string
+  sender_display_name?: string
+  sender_avatar_url?: string
+  sender_user_id?: string
+  id?: string
+}
+
+export interface UIAssistantTurn {
+  role: 'assistant'
+  messages: UIMessage[]
+  timestamp: string
+  platform?: string
+  id?: string
+}
+
+export type UITurn = UIUserTurn | UIAssistantTurn
+
+export interface UIStreamStartEvent {
+  type: 'start'
+}
+
+export interface UIStreamMessageEvent {
+  type: 'message'
+  data: UIMessage
+}
+
+export interface UIStreamEndEvent {
+  type: 'end'
+}
+
+export interface UIStreamErrorEvent {
+  type: 'error'
+  message: string
+}
+
+export type UIStreamEvent =
+  | UIStreamStartEvent
+  | UIStreamMessageEvent
+  | UIStreamEndEvent
+  | UIStreamErrorEvent
+
+export type UIStreamEventHandler = (event: UIStreamEvent) => void
diff --git a/apps/web/src/composables/api/useChat.ws.test.ts b/apps/web/src/composables/api/useChat.ws.test.ts
new file mode 100644
index 00000000..cba3d9dd
--- /dev/null
+++ b/apps/web/src/composables/api/useChat.ws.test.ts
@@ -0,0 +1,74 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { client } from '@memohai/sdk/client'
+import { connectWebSocket } from './useChat.ws'
+
+class MockWebSocket {
+  static CONNECTING = 0
+  static OPEN = 1
+  static CLOSING = 2
+  static CLOSED = 3
+
+  static instances: MockWebSocket[] = []
+
+  readyState = MockWebSocket.CONNECTING
+  sent: string[] = []
+  onopen: (() => void) | null = null
+  onclose: (() => void) | null = null
+  onerror: (() => void) | null = null
+  onmessage: ((event: { data: string }) => void) | null = null
+
+  constructor(public readonly url: string) {
+    MockWebSocket.instances.push(this)
+  }
+
+  send(payload: string) {
+    this.sent.push(payload)
+  }
+
+  close() {
+    this.readyState = MockWebSocket.CLOSED
+    this.onclose?.()
+  }
+
+  open() {
+    this.readyState = MockWebSocket.OPEN
+    this.onopen?.()
+  }
+}
+
+describe('useChat.ws', () => {
+  beforeEach(() => {
+    MockWebSocket.instances = []
+    vi.unstubAllGlobals()
+    client.setConfig({ baseUrl: '/api' })
+    vi.stubGlobal('window', {
+      location: {
+        protocol: 'http:',
+        host: 'localhost:8082',
+      },
+    })
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn(() => ''),
+    })
+    vi.stubGlobal('WebSocket', MockWebSocket)
+  })
+
+  it('queues outbound messages until socket opens', () => {
+    const onStreamEvent = vi.fn()
+    const ws = connectWebSocket('bot-1', onStreamEvent)
+    const socket = MockWebSocket.instances[0]
+
+    expect(socket).toBeDefined()
+    ws.send({ type: 'message', text: 'hello', session_id: 'session-1' })
+    expect(socket.sent).toEqual([])
+
+    socket.open()
+
+    expect(socket.sent).toHaveLength(1)
+    expect(JSON.parse(socket.sent[0]!)).toEqual({
+      type: 'message',
+      text: 'hello',
+      session_id: 'session-1',
+    })
+  })
+})
diff --git a/apps/web/src/composables/api/useChat.ws.ts b/apps/web/src/composables/api/useChat.ws.ts
index edc37386..fe50a594 100644
--- a/apps/web/src/composables/api/useChat.ws.ts
+++ b/apps/web/src/composables/api/useChat.ws.ts
@@ -1,5 +1,5 @@
 import { client } from '@memohai/sdk/client'
-import type { StreamEvent, MessageStreamEvent, ChatAttachment, StreamEventHandler } from './useChat.types'
+import type { ChatAttachment, UIStreamEvent, UIStreamEventHandler } from './useChat.types'
 
 export interface WSClientMessage {
   type: 'message' | 'abort'
@@ -43,8 +43,7 @@ function resolveWebSocketUrl(botId: string): string {
 
 export function connectWebSocket(
   botId: string,
-  onStreamEvent: StreamEventHandler,
-  onMessageEvent?: (event: MessageStreamEvent) => void,
+  onStreamEvent: UIStreamEventHandler,
 ): ChatWebSocket {
   const id = botId.trim()
   if (!id) throw new Error('bot id is required')
@@ -58,12 +57,16 @@ export function connectWebSocket(
   let closed = false
   let reconnectTimer: ReturnType<typeof setTimeout> | null = null
   let reconnectDelay = 1000
+  const sendQueue: string[] = []
 
   const handle: ChatWebSocket = {
     send(msg: WSClientMessage) {
+      const payload = JSON.stringify(msg)
       if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify(msg))
+        ws.send(payload)
+        return
       }
+      sendQueue.push(payload)
     },
     abort() {
       if (ws && ws.readyState === WebSocket.OPEN) {
@@ -96,6 +99,9 @@ export function connectWebSocket(
     ws.onopen = () => {
       isConnected = true
       reconnectDelay = 1000
+      while (sendQueue.length > 0 && ws?.readyState === WebSocket.OPEN) {
+        ws.send(sendQueue.shift()!)
+      }
       handle.onOpen?.()
     }
 
@@ -114,14 +120,11 @@ export function connectWebSocket(
       try {
         const parsed = JSON.parse(event.data)
         if (!parsed || typeof parsed !== 'object') return
-
         const eventType = String(parsed.type ?? '').trim()
-        if (eventType === 'message_created' && onMessageEvent) {
-          onMessageEvent(parsed as MessageStreamEvent)
+        if (eventType !== 'start' && eventType !== 'message' && eventType !== 'end' && eventType !== 'error') {
           return
         }
-
-        onStreamEvent(parsed as StreamEvent)
+        onStreamEvent(parsed as UIStreamEvent)
       } catch {
         // Ignore unparsable messages.
       }
diff --git a/apps/web/src/pages/home/components/message-item.vue b/apps/web/src/pages/home/components/message-item.vue
index 467e4b75..e2514368 100644
--- a/apps/web/src/pages/home/components/message-item.vue
+++ b/apps/web/src/pages/home/components/message-item.vue
@@ -68,11 +68,15 @@
         class="space-y-2"
       >
         <HeartbeatTriggerBlock
-          v-for="(block, i) in message.blocks.filter(b => b.type === 'text')"
-          :key="i"
-          :content="block.content ?? ''"
+          v-if="message.text"
+          :content="message.text"
           :bot-id="botId"
         />
+        <AttachmentBlock
+          v-if="userAttachmentBlock"
+          :block="userAttachmentBlock"
+          :on-open-media="onOpenMedia"
+        />
         <p
           class="text-xs text-muted-foreground/80 mt-1"
           :title="fullTimestamp"
@@ -87,11 +91,15 @@
         class="space-y-2"
       >
         <ScheduleTriggerBlock
-          v-for="(block, i) in message.blocks.filter(b => b.type === 'text')"
-          :key="i"
-          :content="block.content ?? ''"
+          v-if="message.text"
+          :content="message.text"
           :bot-id="botId"
         />
+        <AttachmentBlock
+          v-if="userAttachmentBlock"
+          :block="userAttachmentBlock"
+          :on-open-media="onOpenMedia"
+        />
         <p
           class="text-xs text-muted-foreground/80 mt-1"
           :title="fullTimestamp"
@@ -106,28 +114,23 @@
         class="space-y-2"
       >
         <div
-          v-for="(block, i) in message.blocks"
-          :key="i"
+          v-if="message.text"
+          class="w-full rounded-lg border border-violet-200 dark:border-violet-400/20 bg-violet-50/50 dark:bg-violet-950/20 px-4 py-3"
         >
-          <div
-            v-if="block.type === 'text' && block.content"
-            class="w-full rounded-lg border border-violet-200 dark:border-violet-400/20 bg-violet-50/50 dark:bg-violet-950/20 px-4 py-3"
-          >
-            <div class="prose prose-sm dark:prose-invert max-w-none *:first:mt-0">
-              <MarkdownRender
-                :content="block.content"
-                :is-dark="isDark"
-                :typewriter="message.streaming"
-                custom-id="chat-msg"
-              />
-            </div>
+          <div class="prose prose-sm dark:prose-invert max-w-none *:first:mt-0">
+            <MarkdownRender
+              :content="message.text"
+              :is-dark="isDark"
+              :typewriter="message.streaming"
+              custom-id="chat-msg"
+            />
           </div>
-          <AttachmentBlock
-            v-else-if="block.type === 'attachment'"
-            :block="(block as AttachmentBlockType)"
-            :on-open-media="onOpenMedia"
-          />
         </div>
+        <AttachmentBlock
+          v-if="userAttachmentBlock"
+          :block="userAttachmentBlock"
+          :on-open-media="onOpenMedia"
+        />
         <p
           class="text-xs text-muted-foreground/80 mt-1"
           :title="fullTimestamp"
@@ -142,24 +145,19 @@
         class="space-y-2"
       >
         <div
-          v-for="(block, i) in message.blocks"
-          :key="i"
+          v-if="cleanUserText(message.text)"
+          class="rounded-2xl px-3 py-2 text-xs whitespace-pre-wrap break-all"
+          :class="isSelf
+            ? 'rounded-tr-sm bg-foreground text-background'
+            : 'rounded-tl-sm bg-accent text-foreground'"
         >
-          <div
-            v-if="block.type === 'text' && cleanUserText(block.content)"
-            class="rounded-2xl px-3 py-2 text-xs whitespace-pre-wrap break-all"
-            :class="isSelf
-              ? 'rounded-tr-sm bg-foreground text-background'
-              : 'rounded-tl-sm bg-accent text-foreground'"
-          >
-            {{ cleanUserText(block.content) }}
-          </div>
-          <AttachmentBlock
-            v-else-if="block.type === 'attachment'"
-            :block="(block as AttachmentBlockType)"
-            :on-open-media="onOpenMedia"
-          />
+          {{ cleanUserText(message.text) }}
         </div>
+        <AttachmentBlock
+          v-if="userAttachmentBlock"
+          :block="userAttachmentBlock"
+          :on-open-media="onOpenMedia"
+        />
         <p
           class="text-xs text-muted-foreground/80 mt-1"
           :title="fullTimestamp"
@@ -182,19 +180,19 @@
         </p> -->
 
         <template
-          v-for="(block, i) in message.blocks"
+          v-for="(block, i) in message.messages"
           :key="i"
         >
           <!-- Thinking block -->
           <ThinkingBlock
-            v-if="block.type === 'thinking'"
+            v-if="block.type === 'reasoning'"
             :block="(block as ThinkingBlockType)"
-            :streaming="message.streaming && !block.done"
+            :streaming="isAssistantBlockStreaming(i)"
           />
 
           <!-- Tool call block -->
           <ToolCallBlock
-            v-else-if="block.type === 'tool_call'"
+            v-else-if="block.type === 'tool' && !isHiddenToolMessage(block)"
             :block="(block as ToolCallBlockType)"
           />
 
@@ -206,14 +204,14 @@
             <MarkdownRender
               :content="block.content"
               :is-dark="isDark"
-              :typewriter="message.streaming"
+              :typewriter="isAssistantBlockStreaming(i)"
               custom-id="chat-msg"
             />
           </div>
 
           <!-- Attachment block -->
           <AttachmentBlock
-            v-else-if="block.type === 'attachment'"
+            v-else-if="block.type === 'attachments'"
             :block="(block as AttachmentBlockType)"
             :on-open-media="onOpenMedia"
           />
@@ -221,7 +219,7 @@
 
         <!-- Streaming indicator -->
         <div
-          v-if="message.streaming && message.blocks.length === 0"
+          v-if="message.streaming && !hasVisibleAssistantBlocks"
           class="flex items-center gap-2 text-xs text-muted-foreground h-6"
         >
           <LoaderCircle
@@ -259,6 +257,7 @@ import ChannelBadge from '@/components/chat-list/channel-badge/index.vue'
 // import { useI18n } from 'vue-i18n'
 import type {
   ChatMessage,
+  ContentBlock,
   ThinkingBlock as ThinkingBlockType,
   ToolCallBlock as ToolCallBlockType,
   AttachmentBlock as AttachmentBlockType,
@@ -280,7 +279,9 @@ const props = defineProps<{
 // const chatStore = useChatStore()
 // const { currentBotId, bots } = storeToRefs(chatStore)
 
-const isSelf = computed(() => props.message.isSelf !== false)
+const isSelf = computed(() =>
+  props.message.role !== 'user' || props.message.isSelf !== false,
+)
 
 // const currentBot = computed(() =>
 //   bots.value.find((b) => b.id === currentBotId.value) ?? null,
@@ -300,7 +301,7 @@ const isSelf = computed(() => props.message.isSelf !== false)
 // })
 
 const senderFallback = computed(() => {
-  const name = props.message.senderDisplayName ?? ''
+  const name = props.message.role === 'user' ? (props.message.senderDisplayName ?? '') : ''
   return name.slice(0, 2).toUpperCase() || '?'
 })
 
@@ -324,10 +325,38 @@ const contentClass = computed(() => {
   return 'flex-1 max-w-full'
 })
 
+const userAttachmentBlock = computed<AttachmentBlockType | null>(() => {
+  if (props.message.role !== 'user' || props.message.attachments.length === 0) return null
+  return {
+    id: -1,
+    type: 'attachments',
+    attachments: props.message.attachments,
+  }
+})
+
+function isHiddenToolMessage(block: ContentBlock): boolean {
+  if (block.type !== 'tool') return false
+  const result = block.result as Record<string, unknown> | null
+  return !!result && typeof result === 'object' && result.delivered === 'current_conversation'
+}
+
+function hasLaterAssistantMessage(index: number): boolean {
+  return props.message.role === 'assistant' && props.message.messages.slice(index + 1).length > 0
+}
+
+function isAssistantBlockStreaming(index: number): boolean {
+  return props.message.role === 'assistant' && props.message.streaming && !hasLaterAssistantMessage(index)
+}
+
+const hasVisibleAssistantBlocks = computed(() =>
+  props.message.role === 'assistant'
+    && props.message.messages.some(block => block.type !== 'tool' || !isHiddenToolMessage(block)),
+)
+
 const relativeTimestamp = computed(() =>
   formatRelativeTime(props.message.timestamp),
 )
 const fullTimestamp = computed(() =>
-  formatDateTime(props.message.timestamp.toISOString()),
+  formatDateTime(props.message.timestamp),
 )
 </script>
diff --git a/apps/web/src/pages/home/components/tool-call-exec.vue b/apps/web/src/pages/home/components/tool-call-exec.vue
index bb16dfd2..86df977a 100644
--- a/apps/web/src/pages/home/components/tool-call-exec.vue
+++ b/apps/web/src/pages/home/components/tool-call-exec.vue
@@ -58,6 +58,10 @@
         {{ $t('chat.toolExecOutput') }}
       </CollapsibleTrigger>
       <CollapsibleContent>
+        <pre
+          v-if="progressText"
+          class="px-3 pb-2 text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap break-all"
+        >{{ progressText }}</pre>
         <pre
           v-if="stdout"
           class="px-3 pb-2 text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap break-all"
@@ -137,7 +141,23 @@ const stderr = computed(() => {
   return (r?.stderr as string) ?? ''
 })
 
-const hasOutput = computed(() =>
-  props.block.done && (stdout.value || stderr.value || errorText.value),
+const progressText = computed(() =>
+  (props.block.progress ?? [])
+    .map((item) => formatProgress(item))
+    .filter(Boolean)
+    .join('\n'),
 )
+
+const hasOutput = computed(() =>
+  !!(progressText.value || (props.block.done && (stdout.value || stderr.value || errorText.value))),
+)
+
+function formatProgress(val: unknown): string {
+  if (typeof val === 'string') return val
+  try {
+    return JSON.stringify(val, null, 2)
+  } catch {
+    return String(val)
+  }
+}
 </script>
diff --git a/apps/web/src/pages/home/components/tool-call-generic.vue b/apps/web/src/pages/home/components/tool-call-generic.vue
index 51c67421..d0ac26ff 100644
--- a/apps/web/src/pages/home/components/tool-call-generic.vue
+++ b/apps/web/src/pages/home/components/tool-call-generic.vue
@@ -44,6 +44,22 @@
       </CollapsibleContent>
     </Collapsible>
 
+    <Collapsible
+      v-if="progressText"
+      v-model:open="progressOpen"
+    >
+      <CollapsibleTrigger class="flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground cursor-pointer w-full border-t border-muted">
+        <ChevronRight
+          class="size-2.5 transition-transform"
+          :class="{ 'rotate-90': progressOpen }"
+        />
+        {{ $t('chat.toolRunning') }}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <pre class="px-3 pb-2 text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap break-all">{{ progressText }}</pre>
+      </CollapsibleContent>
+    </Collapsible>
+
     <Collapsible
       v-if="block.done && block.result != null"
       v-model:open="resultOpen"
@@ -63,17 +79,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { Check, LoaderCircle, ChevronRight } from 'lucide-vue-next'
 import { Badge, Collapsible, CollapsibleTrigger, CollapsibleContent } from '@memohai/ui'
 import type { ToolCallBlock } from '@/store/chat-list'
 
-defineProps<{
+const inputOpen = ref(false)
+const progressOpen = ref(true)
+const resultOpen = ref(false)
+
+const props = defineProps<{
   block: ToolCallBlock
 }>()
 
-const inputOpen = ref(false)
-const resultOpen = ref(false)
+const progressText = computed(() =>
+  (props.block.progress ?? [])
+    .map(item => formatJson(item))
+    .filter(Boolean)
+    .join('\n'),
+)
 
 function formatJson(val: unknown): string {
   if (typeof val === 'string') return val
diff --git a/apps/web/src/pages/home/composables/useMediaGallery.ts b/apps/web/src/pages/home/composables/useMediaGallery.ts
index cef48f7c..1225160c 100644
--- a/apps/web/src/pages/home/composables/useMediaGallery.ts
+++ b/apps/web/src/pages/home/composables/useMediaGallery.ts
@@ -70,8 +70,23 @@ export function useMediaGallery(messages: Ref<ChatMessage[]>) {
   const items = computed((): MediaGalleryItem[] => {
     const result: MediaGalleryItem[] = []
     for (const msg of messages.value) {
-      for (const block of msg.blocks) {
-        if (block.type !== 'attachment') continue
+      if (msg.role === 'user') {
+        for (const att of msg.attachments) {
+          if (!isMediaType(att)) continue
+          const src = resolveUrl(att)
+          if (!src) continue
+          const type = String(att.type ?? '').toLowerCase()
+          result.push({
+            src,
+            type: type === 'video' ? 'video' : 'image',
+            name: String(att.name ?? '').trim() || undefined,
+          })
+        }
+        continue
+      }
+
+      for (const block of msg.messages) {
+        if (block.type !== 'attachments') continue
         for (const att of block.attachments) {
           if (!isMediaType(att)) continue
           const src = resolveUrl(att)
diff --git a/apps/web/src/store/chat-list.ts b/apps/web/src/store/chat-list.ts
index 13e668e2..e665105a 100644
--- a/apps/web/src/store/chat-list.ts
+++ b/apps/web/src/store/chat-list.ts
@@ -3,96 +3,78 @@ import { computed, reactive, ref, watch } from 'vue'
 import { useRetryingStream } from '@/composables/useRetryingStream'
 import { useUserStore } from '@/store/user'
 import { useChatSelectionStore } from '@/store/chat-selection'
+import { shouldRefreshFromMessageCreated, upsertById } from './chat-list.utils'
 import {
   createSession,
   deleteSession as requestDeleteSession,
   fetchSessions,
   type Bot,
   type SessionSummary,
-  type Message,
-  type StreamEvent,
   type MessageStreamEvent,
-  fetchBots,
-  fetchMessages,
-  extractMessageText,
-  extractToolCalls,
-  extractAllToolResults,
-  extractMessageReasoning,
-  sendLocalChannelMessage,
-  streamLocalChannel,
-  streamMessageEvents,
-  connectWebSocket,
   type ChatAttachment,
   type ChatWebSocket,
+  type UIAttachment,
+  type UIAttachmentsMessage,
+  type UIMessage,
+  type UIReasoningMessage,
+  type UITextMessage,
+  type UIToolMessage,
+  type UITurn,
+  type UIUserTurn,
+  type UIStreamEvent,
+  fetchBots,
+  fetchMessagesUI,
+  sendLocalChannelMessage,
+  streamMessageEvents,
+  connectWebSocket,
 } from '@/composables/api/useChat'
 
-// ---- Message model (blocks-based, aligned with main branch) ----
+export type TextBlock = UITextMessage
+export type ThinkingBlock = UIReasoningMessage
+export type AttachmentItem = UIAttachment
+export type AttachmentBlock = UIAttachmentsMessage
 
-export interface TextBlock {
-  type: 'text'
-  content: string
-}
-
-export interface ThinkingBlock {
-  type: 'thinking'
-  content: string
-  done: boolean
-}
-
-export interface ToolCallBlock {
-  type: 'tool_call'
+export interface ToolCallBlock extends UIToolMessage {
   toolCallId: string
   toolName: string
-  input: unknown
   result: unknown | null
   done: boolean
 }
 
-export interface AttachmentItem {
-  type: string
-  path?: string
-  name?: string
-  url?: string
-  base64?: string
-  content_hash?: string
-  bot_id?: string
-  mime?: string
-  size?: number
-  storage_key?: string
-  [key: string]: unknown
-}
-
-export interface AttachmentBlock {
-  type: 'attachment'
-  attachments: AttachmentItem[]
-}
-
 export type ContentBlock = TextBlock | ThinkingBlock | ToolCallBlock | AttachmentBlock
 
-export interface ChatMessage {
+export interface ChatUserTurn {
   id: string
-  role: 'user' | 'assistant'
-  blocks: ContentBlock[]
-  timestamp: Date
-  streaming: boolean
+  role: 'user'
+  text: string
+  attachments: AttachmentItem[]
+  timestamp: string
   platform?: string
   senderDisplayName?: string
   senderAvatarUrl?: string
-  isSelf?: boolean
+  senderUserId?: string
+  streaming: boolean
+  isSelf: boolean
 }
 
+export interface ChatAssistantTurn {
+  id: string
+  role: 'assistant'
+  messages: ContentBlock[]
+  timestamp: string
+  platform?: string
+  streaming: boolean
+}
+
+export type ChatMessage = ChatUserTurn | ChatAssistantTurn
+
 interface PendingAssistantStream {
-  assistantMsg: ChatMessage
-  textBlockIdx: number
-  thinkingBlockIdx: number
-  deferredAttachments: Array<Record<string, unknown>>
+  assistantTurn: ChatAssistantTurn
   done: boolean
   resolve: () => void
   reject: (err: Error) => void
 }
 
-// ---- Store ----
-
 export const useChatStore = defineStore('chat', () => {
   const selectionStore = useChatSelectionStore()
   const { currentBotId, sessionId } = storeToRefs(selectionStore)
@@ -113,10 +95,10 @@ export const useChatStore = defineStore('chat', () => {
   let abortFn: (() => void) | null = null
   let messageEventsSince = ''
   let pendingAssistantStream: PendingAssistantStream | null = null
-  const knownServerMessageIds = new Set<string>()
-  const messageEventsStream = useRetryingStream()
-  const localStream = useRetryingStream()
   let activeWs: ChatWebSocket | null = null
+  let refreshTimer: ReturnType<typeof setTimeout> | null = null
+  let refreshPromise: Promise<void> | null = null
+  const messageEventsStream = useRetryingStream()
 
   const activeSession = computed(() =>
     sessions.value.find((s) => s.id === sessionId.value) ?? null,
@@ -137,7 +119,6 @@ export const useChatStore = defineStore('chat', () => {
       void initialize()
     } else {
       stopMessageEvents()
-      stopLocalStream()
       stopWebSocket()
       rejectPendingAssistantStream(new Error('Bot stream stopped'))
       messageEventsSince = ''
@@ -152,192 +133,17 @@ export const useChatStore = defineStore('chat', () => {
   const isPendingBot = (bot: Bot | null | undefined) =>
     bot?.status === 'creating' || bot?.status === 'deleting'
 
-  // ---- Message adapter: convert server Message to ChatMessage ----
-
-  function mediaTypeFromMime(mime: string): string {
-    const m = (mime || '').toLowerCase().trim()
-    if (m.startsWith('image/')) return 'image'
-    if (m.startsWith('audio/')) return 'audio'
-    if (m.startsWith('video/')) return 'video'
-    return 'file'
+  function normalizeTimestamp(value?: string): string {
+    const raw = (value ?? '').trim()
+    if (!raw) return new Date().toISOString()
+    const parsed = new Date(raw)
+    return Number.isNaN(parsed.getTime()) ? new Date().toISOString() : parsed.toISOString()
   }
 
-  function buildAssetBlocks(raw: Message): AttachmentBlock[] {
-    if (!raw.assets?.length) return []
-    const items: Array<Record<string, unknown>> = raw.assets.map((a) => ({
-      type: mediaTypeFromMime(a.mime),
-      content_hash: a.content_hash,
-      bot_id: raw.bot_id,
-      mime: a.mime,
-      size: a.size_bytes,
-      storage_key: a.storage_key,
-      name: a.name || undefined,
-      metadata: a.metadata || undefined,
-    }))
-    return [{ type: 'attachment', attachments: items }]
-  }
-
-  function messageToChat(raw: Message): ChatMessage | null {
-    if (raw.role !== 'user' && raw.role !== 'assistant') return null
-
-    const text = extractMessageText(raw)
-    const assetBlocks = buildAssetBlocks(raw)
-    const reasoningTexts = extractMessageReasoning(raw)
-
-    if (!text && assetBlocks.length === 0 && reasoningTexts.length === 0) return null
-
-    const blocks: ContentBlock[] = []
-    for (const r of reasoningTexts) {
-      blocks.push({ type: 'thinking', content: r, done: true })
-    }
-    if (text) blocks.push({ type: 'text', content: text })
-    blocks.push(...assetBlocks)
-
-    const createdAt = raw.created_at ? new Date(raw.created_at) : new Date()
-    const timestamp = Number.isNaN(createdAt.getTime()) ? new Date() : createdAt
-    const platform = (raw.platform ?? '').trim().toLowerCase()
-    const channelTag = platform && platform !== 'local' ? platform : undefined
-
-    if (raw.role === 'user') {
-      const isSelf = resolveIsSelf(raw)
-      const senderName = (raw.sender_display_name ?? '').trim() || undefined
-      const senderAvatar = (raw.sender_avatar_url ?? '').trim() || undefined
-      return {
-        id: raw.id || nextId(),
-        role: 'user',
-        blocks,
-        timestamp,
-        streaming: false,
-        isSelf,
-        ...(channelTag && { platform: channelTag }),
-        ...(channelTag && { senderDisplayName: senderName, senderAvatarUrl: senderAvatar }),
-      }
-    }
-
-    return {
-      id: raw.id || nextId(),
-      role: 'assistant',
-      blocks,
-      timestamp,
-      streaming: false,
-      ...(channelTag && { platform: channelTag }),
-    }
-  }
-
-  function convertMessagesToChats(rows: Message[]): ChatMessage[] {
-    const result: ChatMessage[] = []
-    let pendingAssistant: ChatMessage | null = null
-    const pendingToolCallMap = new Map<string, ToolCallBlock>()
-
-    function flushPending() {
-      if (!pendingAssistant) return
-      for (const block of pendingAssistant.blocks) {
-        if (block.type === 'tool_call' && !block.done) block.done = true
-      }
-      result.push(pendingAssistant)
-      pendingAssistant = null
-      pendingToolCallMap.clear()
-    }
-
-    function makeTimestamp(raw: Message): Date {
-      const d = raw.created_at ? new Date(raw.created_at) : new Date()
-      return Number.isNaN(d.getTime()) ? new Date() : d
-    }
-
-    for (const raw of rows) {
-      if (raw.role === 'user') {
-        flushPending()
-        const chat = messageToChat(raw)
-        if (chat) result.push(chat)
-        continue
-      }
-
-      if (raw.role === 'assistant') {
-        const toolCalls = extractToolCalls(raw)
-        const text = extractMessageText(raw)
-        const reasoningTexts = extractMessageReasoning(raw)
-
-        if (toolCalls.length > 0) {
-          if (!pendingAssistant) {
-            const platform = (raw.platform ?? '').trim().toLowerCase()
-            const channelTag = platform && platform !== 'local' ? platform : undefined
-            pendingAssistant = {
-              id: raw.id || nextId(),
-              role: 'assistant',
-              blocks: [],
-              timestamp: makeTimestamp(raw),
-              streaming: false,
-              ...(channelTag && { platform: channelTag }),
-            }
-          }
-          for (const r of reasoningTexts) {
-            pendingAssistant.blocks.push({ type: 'thinking', content: r, done: true })
-          }
-          if (text) {
-            pendingAssistant.blocks.push({ type: 'text', content: text })
-          }
-          for (const tc of toolCalls) {
-            const block: ToolCallBlock = {
-              type: 'tool_call',
-              toolCallId: tc.id ?? '',
-              toolName: tc.name,
-              input: tc.input,
-              result: null,
-              done: false,
-            }
-            pendingAssistant.blocks.push(block)
-            if (tc.id) pendingToolCallMap.set(tc.id, block)
-          }
-          pendingAssistant.blocks.push(...buildAssetBlocks(raw))
-          continue
-        }
-
-        if (pendingAssistant && text) {
-          for (const r of reasoningTexts) {
-            pendingAssistant.blocks.push({ type: 'thinking', content: r, done: true })
-          }
-          pendingAssistant.blocks.push({ type: 'text', content: text })
-          pendingAssistant.blocks.push(...buildAssetBlocks(raw))
-          flushPending()
-          continue
-        }
-
-        flushPending()
-        const chat = messageToChat(raw)
-        if (chat) result.push(chat)
-        continue
-      }
-
-      if (raw.role === 'tool') {
-        const results = extractAllToolResults(raw)
-        for (const r of results) {
-          if (!r.toolCallId || !pendingToolCallMap.has(r.toolCallId)) continue
-          const block = pendingToolCallMap.get(r.toolCallId)!
-          const output = r.output as Record<string, unknown> | null
-          if (output && typeof output === 'object' && output.delivered === 'current_conversation') {
-            // Same-conversation send/react/speak: remove the tool_call block
-            if (pendingAssistant) {
-              const idx = pendingAssistant.blocks.indexOf(block)
-              if (idx >= 0) pendingAssistant.blocks.splice(idx, 1)
-            }
-            pendingToolCallMap.delete(r.toolCallId)
-            continue
-          }
-          block.result = r.output
-          block.done = true
-        }
-        continue
-      }
-    }
-
-    flushPending()
-    return result
-  }
-
-  function resolveIsSelf(raw: Message): boolean {
-    const platform = (raw.platform ?? '').trim().toLowerCase()
+  function resolveIsSelf(turn: UIUserTurn): boolean {
+    const platform = (turn.platform ?? '').trim().toLowerCase()
     if (!platform || platform === 'local') return true
-    const senderUserId = (raw.sender_user_id ?? '').trim()
+    const senderUserId = (turn.sender_user_id ?? '').trim()
     if (!senderUserId) return false
     const userStore = useUserStore()
     const currentUserId = (userStore.userInfo.id ?? '').trim()
@@ -345,47 +151,207 @@ export const useChatStore = defineStore('chat', () => {
     return senderUserId === currentUserId
   }
 
-  // ---- Abort ----
-
-  function abort() {
-    if (activeWs) {
-      activeWs.abort()
-    }
-    abortFn?.()
-    abortFn = null
-    for (const msg of messages) {
-      if (msg.streaming) msg.streaming = false
-    }
-    streamingSessionId.value = null
+  function normalizeAttachment(att: UIAttachment): AttachmentItem {
+    return { ...att }
   }
 
-  // ---- Message list management ----
-
-  function replaceMessages(items: ChatMessage[], serverRowIds?: string[]) {
-    messages.splice(0, messages.length, ...items)
-    knownServerMessageIds.clear()
-    for (const item of items) {
-      const tid = String(item.id ?? '').trim()
-      if (tid) knownServerMessageIds.add(tid)
+  function normalizeUIMessage(msg: UIMessage): ContentBlock {
+    switch (msg.type) {
+      case 'tool':
+        return {
+          ...msg,
+          toolCallId: msg.tool_call_id,
+          toolName: msg.name,
+          result: msg.output ?? null,
+          done: !msg.running,
+          progress: msg.progress ? [...msg.progress] : undefined,
+        }
+      case 'attachments':
+        return {
+          ...msg,
+          attachments: msg.attachments.map(normalizeAttachment),
+        }
+      default:
+        return { ...msg }
     }
-    if (serverRowIds) {
-      for (const id of serverRowIds) {
-        const tid = id.trim()
-        if (tid) knownServerMessageIds.add(tid)
+  }
+
+  function normalizeTurn(turn: UITurn): ChatMessage {
+    if (turn.role === 'user') {
+      return {
+        id: String(turn.id ?? nextId()),
+        role: 'user',
+        text: turn.text ?? '',
+        attachments: (turn.attachments ?? []).map(normalizeAttachment),
+        timestamp: normalizeTimestamp(turn.timestamp),
+        platform: (turn.platform ?? '').trim() || undefined,
+        senderDisplayName: (turn.sender_display_name ?? '').trim() || undefined,
+        senderAvatarUrl: (turn.sender_avatar_url ?? '').trim() || undefined,
+        senderUserId: (turn.sender_user_id ?? '').trim() || undefined,
+        streaming: false,
+        isSelf: resolveIsSelf(turn),
+      }
+    }
+
+    return {
+      id: String(turn.id ?? nextId()),
+      role: 'assistant',
+      messages: (turn.messages ?? []).map(normalizeUIMessage),
+      timestamp: normalizeTimestamp(turn.timestamp),
+      platform: (turn.platform ?? '').trim() || undefined,
+      streaming: false,
+    }
+  }
+
+  function updateSince(value?: string) {
+    const next = (value ?? '').trim()
+    if (!next) return
+    if (!messageEventsSince) {
+      messageEventsSince = next
+      return
+    }
+    const currentTs = Date.parse(messageEventsSince)
+    const nextTs = Date.parse(next)
+    if (!Number.isNaN(nextTs) && (Number.isNaN(currentTs) || nextTs > currentTs)) {
+      messageEventsSince = next
+    }
+  }
+
+  function updateSinceFromMessages(items: ChatMessage[]) {
+    messageEventsSince = ''
+    for (const item of items) {
+      updateSince(item.timestamp)
+    }
+  }
+
+  function replaceMessages(items: UITurn[]) {
+    const normalized = items.map(normalizeTurn)
+    messages.splice(0, messages.length, ...normalized)
+    updateSinceFromMessages(normalized)
+  }
+
+  function createCompletionForAssistantTurn(assistantTurn: ChatAssistantTurn): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      pendingAssistantStream = {
+        assistantTurn,
+        done: false,
+        resolve,
+        reject,
+      }
+    })
+  }
+
+  function createOptimisticAssistantTurn(): ChatAssistantTurn {
+    return {
+      id: nextId(),
+      role: 'assistant',
+      messages: [],
+      timestamp: new Date().toISOString(),
+      streaming: true,
+    }
+  }
+
+  function createOptimisticUserTurn(text: string, attachments?: ChatAttachment[]): ChatUserTurn {
+    return {
+      id: nextId(),
+      role: 'user',
+      text,
+      attachments: (attachments ?? []).map((attachment) => ({
+        type: attachment.type,
+        url: attachment.base64,
+        base64: attachment.base64,
+        name: attachment.name ?? '',
+        mime: attachment.mime ?? '',
+      })),
+      timestamp: new Date().toISOString(),
+      streaming: false,
+      isSelf: true,
+    }
+  }
+
+  function resolvePendingAssistantStream() {
+    if (!pendingAssistantStream || pendingAssistantStream.done) return
+    const session = pendingAssistantStream
+    session.assistantTurn.streaming = false
+    session.done = true
+    pendingAssistantStream = null
+    session.resolve()
+  }
+
+  function rejectPendingAssistantStream(err: Error) {
+    if (!pendingAssistantStream || pendingAssistantStream.done) return
+    const session = pendingAssistantStream
+    session.assistantTurn.streaming = false
+    session.done = true
+    pendingAssistantStream = null
+    session.reject(err)
+  }
+
+  function ensureDiscussStream(): PendingAssistantStream {
+    if (pendingAssistantStream && !pendingAssistantStream.done) {
+      return pendingAssistantStream
+    }
+    messages.push(createOptimisticAssistantTurn())
+    const assistantTurn = messages[messages.length - 1] as ChatAssistantTurn
+    void createCompletionForAssistantTurn(assistantTurn).catch(() => {})
+    return pendingAssistantStream!
+  }
+
+  function upsertAssistantUIMessage(turn: ChatAssistantTurn, message: UIMessage) {
+    const normalized = normalizeUIMessage(message)
+    turn.messages = upsertById(turn.messages, normalized)
+  }
+
+  function nextAssistantMessageId(turn: ChatAssistantTurn): number {
+    return turn.messages.reduce((maxId, message) => Math.max(maxId, message.id), -1) + 1
+  }
+
+  function appendAssistantError(session: PendingAssistantStream, errorMessage: string) {
+    const text = errorMessage.trim()
+    if (!text) return
+
+    for (let index = session.assistantTurn.messages.length - 1; index >= 0; index -= 1) {
+      const current = session.assistantTurn.messages[index]
+      if (current?.type === 'text') {
+        session.assistantTurn.messages[index] = {
+          ...current,
+          content: `${current.content}\n\n**Error:** ${text}`.trim(),
+        }
+        return
+      }
+    }
+
+    session.assistantTurn.messages.push({
+      id: nextAssistantMessageId(session.assistantTurn),
+      type: 'text',
+      content: `**Error:** ${text}`,
+    })
+  }
+
+  function handleWSStreamEvent(event: UIStreamEvent) {
+    switch (event.type) {
+      case 'start':
+        ensureDiscussStream()
+        break
+      case 'message':
+        upsertAssistantUIMessage(ensureDiscussStream().assistantTurn, event.data)
+        break
+      case 'end':
+        resolvePendingAssistantStream()
+        break
+      case 'error': {
+        const session = ensureDiscussStream()
+        appendAssistantError(session, event.message || 'stream error')
+        rejectPendingAssistantStream(new Error(event.message || 'stream error'))
+        break
       }
     }
   }
 
-  // ---- SSE real-time events ----
-
   function stopMessageEvents() {
     messageEventsStream.stop()
   }
 
-  function stopLocalStream() {
-    localStream.stop()
-  }
-
   function stopWebSocket() {
     if (activeWs) {
       activeWs.close()
@@ -397,308 +363,58 @@ export const useChatStore = defineStore('chat', () => {
     const bid = targetBotId.trim()
     stopWebSocket()
     if (!bid) return
-
-    activeWs = connectWebSocket(
-      bid,
-      handleLocalStreamEvent,
-      (e) => handleStreamEvent(bid, e),
-    )
+    activeWs = connectWebSocket(bid, handleWSStreamEvent)
   }
 
-  function pushAssistantBlock(session: PendingAssistantStream, block: ContentBlock): number {
-    session.assistantMsg.blocks.push(block)
-    return session.assistantMsg.blocks.length - 1
-  }
-
-  function appendAssistantError(session: PendingAssistantStream, errorMessage: string) {
-    const message = errorMessage.trim()
-    if (!message) return
-    ensureAssistantTextBlock(session).content += `\n\n**Error:** ${message}`
-  }
-
-  function ensureAssistantTextBlock(session: PendingAssistantStream): TextBlock {
-    if (session.textBlockIdx < 0 || session.assistantMsg.blocks[session.textBlockIdx]?.type !== 'text') {
-      session.textBlockIdx = pushAssistantBlock(session, { type: 'text', content: '' })
-    }
-    return session.assistantMsg.blocks[session.textBlockIdx] as TextBlock
-  }
-
-  function resolveStreamErrorMessage(event: StreamEvent, fallback: string): string {
-    if (typeof event.message === 'string') return event.message
-    if (typeof event.error === 'string') return event.error
-    return fallback
-  }
-
-  function flushDeferredAttachments(session: PendingAssistantStream) {
-    if (session.deferredAttachments.length === 0) return
-    const lastBlock = session.assistantMsg.blocks[session.assistantMsg.blocks.length - 1]
-    if (lastBlock && lastBlock.type === 'attachment') {
-      lastBlock.attachments.push(...session.deferredAttachments)
-    } else {
-      pushAssistantBlock(session, { type: 'attachment', attachments: [...session.deferredAttachments] })
-    }
-    session.deferredAttachments = []
-  }
-
-  function resolvePendingAssistantStream() {
-    if (!pendingAssistantStream || pendingAssistantStream.done) return
-    const session = pendingAssistantStream
-    flushDeferredAttachments(session)
-    session.done = true
-    pendingAssistantStream = null
-    session.resolve()
-  }
-
-  function rejectPendingAssistantStream(err: Error) {
-    if (!pendingAssistantStream || pendingAssistantStream.done) return
-    const session = pendingAssistantStream
-    flushDeferredAttachments(session)
-    session.done = true
-    pendingAssistantStream = null
-    session.reject(err)
-  }
-
-  function ensureDiscussStream(): PendingAssistantStream {
-    const assistantMsg: ChatMessage = {
-      id: nextId(),
-      role: 'assistant',
-      blocks: [],
-      timestamp: new Date(),
-      streaming: true,
-    }
-    messages.push(assistantMsg)
-    let resolveStream: () => void = () => {}
-    let rejectStream: (err: Error) => void = () => {}
-    new Promise<void>((resolve, reject) => { resolveStream = resolve; rejectStream = reject })
-      .catch(() => {})
-    const stream: PendingAssistantStream = {
-      assistantMsg,
-      textBlockIdx: -1,
-      thinkingBlockIdx: -1,
-      deferredAttachments: [],
-      done: false,
-      resolve: resolveStream,
-      reject: rejectStream,
-    }
-    pendingAssistantStream = stream
-    return stream
-  }
-
-  function handleLocalStreamEvent(event: StreamEvent) {
-    const meta = event.metadata as Record<string, unknown> | undefined
-    const sourceChannel = meta?.source_channel as string | undefined
-    const isCrossChannel = !!sourceChannel
-
-    // Cross-channel events (Telegram, Discord, etc.) don't carry session_id,
-    // so we can't determine which session they belong to. Skip them here;
-    // persisted messages will arrive through the SSE message events stream
-    // with proper session_id filtering via appendRealtimeMessage.
-    if (isCrossChannel) return
-
-    const type = (event.type ?? '').toLowerCase()
-
-    // Discuss mode: agent events arrive without a prior user send,
-    // so pendingAssistantStream may be null. Auto-create one on agent_start
-    // so that subsequent reasoning / tool_call / text events render.
-    if (!pendingAssistantStream || pendingAssistantStream.done) {
-      if (type === 'agent_start') {
-        ensureDiscussStream()
-      } else {
-        return
-      }
-    }
-
-    const session = pendingAssistantStream!
-
-    switch (type) {
-      case 'text_start':
-        session.textBlockIdx = pushAssistantBlock(session, { type: 'text', content: '' })
-        break
-      case 'text_delta':
-        if (typeof event.delta === 'string') {
-          ensureAssistantTextBlock(session).content += event.delta
-        }
-        break
-      case 'text_end':
-        session.textBlockIdx = -1
-        break
-      case 'reasoning_start':
-        session.thinkingBlockIdx = pushAssistantBlock(session, { type: 'thinking', content: '', done: false })
-        break
-      case 'reasoning_delta':
-        if (typeof event.delta === 'string') {
-          if (session.thinkingBlockIdx < 0 || session.assistantMsg.blocks[session.thinkingBlockIdx]?.type !== 'thinking') {
-            session.thinkingBlockIdx = pushAssistantBlock(session, { type: 'thinking', content: '', done: false })
-          }
-          ;(session.assistantMsg.blocks[session.thinkingBlockIdx] as ThinkingBlock).content += event.delta
-        }
-        break
-      case 'reasoning_end':
-        if (session.thinkingBlockIdx >= 0 && session.assistantMsg.blocks[session.thinkingBlockIdx]?.type === 'thinking') {
-          const tb = session.assistantMsg.blocks[session.thinkingBlockIdx] as ThinkingBlock
-          if (tb.content.trim() === '') {
-            session.assistantMsg.blocks.splice(session.thinkingBlockIdx, 1)
-          } else {
-            tb.done = true
-          }
-        }
-        session.thinkingBlockIdx = -1
-        break
-      case 'tool_call_start':
-        pushAssistantBlock(session, {
-          type: 'tool_call',
-          toolCallId: (event.toolCallId as string) ?? '',
-          toolName: (event.toolName as string) ?? 'unknown',
-          input: event.input ?? null,
-          result: null,
-          done: false,
-        })
-        session.textBlockIdx = -1
-        break
-      case 'tool_call_end': {
-        const callId = (event.toolCallId as string) ?? ''
-        const toolResult = event.result as Record<string, unknown> | null
-        const isLocalDelivery = (event.toolName === 'send' || event.toolName === 'react' || event.toolName === 'speak')
-          && toolResult != null
-          && typeof toolResult === 'object'
-          && toolResult.delivered === 'current_conversation'
-
-        if (isLocalDelivery) {
-          // Same-conversation send/react/speak: remove the tool_call block
-          // so the user only sees the attachment, not the tool invocation.
-          if (callId) {
-            const idx = session.assistantMsg.blocks.findIndex(
-              (b) => b.type === 'tool_call' && (b as ToolCallBlock).toolCallId === callId,
-            )
-            if (idx >= 0)
-              session.assistantMsg.blocks.splice(idx, 1)
-          }
-          break
-        }
-
-        let matched = false
-        if (callId) {
-          for (let i = 0; i < session.assistantMsg.blocks.length; i++) {
-            const block = session.assistantMsg.blocks[i]
-            if (block && block.type === 'tool_call' && block.toolCallId === callId && !block.done) {
-              block.result = event.result ?? null
-              block.input = event.input ?? block.input
-              block.done = true
-              matched = true
-              break
-            }
-          }
-        }
-        if (!matched) {
-          for (let i = 0; i < session.assistantMsg.blocks.length; i++) {
-            const block = session.assistantMsg.blocks[i]
-            if (block && block.type === 'tool_call' && block.toolName === event.toolName && !block.done) {
-              block.result = event.result ?? null
-              block.input = event.input ?? block.input
-              block.done = true
-              break
-            }
-          }
-        }
-        break
-      }
-      case 'attachment_delta': {
-        const items = event.attachments
-        if (Array.isArray(items) && items.length > 0) {
-          session.deferredAttachments.push(...items)
-        }
-        break
-      }
-      case 'final':
-        break
-      case 'processing_started':
-        if (session.assistantMsg.blocks.length === 0) {
-          session.textBlockIdx = pushAssistantBlock(session, { type: 'text', content: '' })
-        }
-        break
-      case 'processing_completed':
-        resolvePendingAssistantStream()
-        break
-      case 'processing_failed': {
-        const message = resolveStreamErrorMessage(event, 'processing failed')
-        appendAssistantError(session, message)
-        rejectPendingAssistantStream(new Error(message))
-        break
-      }
-      case 'error': {
-        const message = resolveStreamErrorMessage(event, 'stream error')
-        appendAssistantError(session, message)
-        rejectPendingAssistantStream(new Error(message))
-        break
-      }
-      case 'agent_abort':
-      case 'agent_end':
-        resolvePendingAssistantStream()
-        break
-      case 'agent_start':
-      default: {
-        const fallback = extractFallbackText(event)
-        if (fallback) {
-          ensureAssistantTextBlock(session).content += fallback
-        }
-        break
-      }
-    }
-  }
-
-  function startLocalStream(targetBotId: string) {
+  function ensureWebSocket(targetBotId: string): ChatWebSocket | null {
     const bid = targetBotId.trim()
-    stopLocalStream()
-    if (!bid) return
-
-    localStream.start(async (signal) => {
-      await streamLocalChannel(bid, signal, handleLocalStreamEvent)
-    })
-  }
-
-  function updateSince(createdAt?: string) {
-    const v = (createdAt ?? '').trim()
-    if (!v) return
-    if (!messageEventsSince) { messageEventsSince = v; return }
-    const cur = Date.parse(messageEventsSince)
-    const next = Date.parse(v)
-    if (!Number.isNaN(next) && (Number.isNaN(cur) || next > cur)) {
-      messageEventsSince = v
+    if (!bid) return null
+    if (!activeWs) {
+      startWebSocket(bid)
     }
+    return activeWs
   }
 
-  function updateSinceFromRows(rows: Message[]) {
-    messageEventsSince = ''
-    for (const row of rows) updateSince(row.created_at)
+  async function refreshCurrentSession(targetBotId?: string, targetSessionId?: string) {
+    const bid = (targetBotId ?? currentBotId.value ?? '').trim()
+    const sid = (targetSessionId ?? sessionId.value ?? '').trim()
+    if (!bid || !sid) return
+
+    if (refreshPromise) {
+      await refreshPromise
+      return
+    }
+
+    refreshPromise = (async () => {
+      const turns = await fetchMessagesUI(bid, sid, { limit: PAGE_SIZE })
+      if (currentBotId.value !== bid || sessionId.value !== sid) return
+      replaceMessages(turns)
+      touchSession(sid)
+      const streamStillActive = streamingSessionId.value === sid && pendingAssistantStream && !pendingAssistantStream.done
+      if (!streamStillActive && pendingAssistantStream) {
+        pendingAssistantStream.assistantTurn.streaming = false
+        pendingAssistantStream = null
+      }
+      if (!streamStillActive) {
+        streamingSessionId.value = null
+      }
+    })().finally(() => {
+      refreshPromise = null
+    })
+
+    await refreshPromise
   }
 
-  function hasMessageWithId(id: string) {
-    const tid = id.trim()
-    if (!tid) return false
-    if (knownServerMessageIds.has(tid)) return true
-    return messages.some((m) => String(m.id).trim() === tid)
-  }
+  function scheduleRefreshCurrentSession(expectedSessionId?: string, delay = 100) {
+    const sid = (sessionId.value ?? '').trim()
+    if (!sid) return
+    if (expectedSessionId?.trim() && expectedSessionId.trim() !== sid) return
+    if (refreshTimer) return
 
-  function resolveMessagePlatform(raw: Message): string {
-    const direct = (raw.platform ?? '').trim().toLowerCase()
-    if (direct) return direct
-    const fromMeta = raw.metadata?.platform
-    return typeof fromMeta === 'string' ? fromMeta.trim().toLowerCase() : ''
-  }
-
-  function appendRealtimeMessage(raw: Message) {
-    updateSince(raw.created_at)
-    const msgSessionId = (raw.session_id ?? '').trim()
-    if (msgSessionId && sessionId.value && msgSessionId !== sessionId.value) return
-    const platform = resolveMessagePlatform(raw)
-    if (platform === 'local') return
-    const mid = String(raw.id ?? '').trim()
-    if (mid && hasMessageWithId(mid)) return
-    const item = messageToChat(raw)
-    if (!item) return
-    messages.push(item)
-    messages.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
-    if (sessionId.value) touchSession(sessionId.value)
+    refreshTimer = setTimeout(() => {
+      refreshTimer = null
+      void refreshCurrentSession()
+    }, delay)
   }
 
   function handleStreamEvent(targetBotId: string, event: MessageStreamEvent) {
@@ -709,14 +425,18 @@ export const useChatStore = defineStore('chat', () => {
     if (eventType === 'message_created') {
       const raw = event.message
       if (!raw) return
-      const pBotId = (raw.bot_id ?? '').trim()
-      if (pBotId && pBotId !== targetBotId) return
-      appendRealtimeMessage(raw)
-    } else if (eventType === 'session_title_updated') {
+      updateSince(raw.created_at)
+      if (shouldRefreshFromMessageCreated(targetBotId, sessionId.value, streamingSessionId.value, event)) {
+        scheduleRefreshCurrentSession((raw.session_id ?? '').trim())
+      }
+      return
+    }
+
+    if (eventType === 'session_title_updated') {
       const sid = (event.session_id ?? '').trim()
       const title = (event.title ?? '').trim()
       if (!sid || !title) return
-      const target = sessions.value.find((s) => s.id === sid)
+      const target = sessions.value.find((session) => session.id === sid)
       if (target) target.title = title
     }
   }
@@ -730,43 +450,53 @@ export const useChatStore = defineStore('chat', () => {
       await streamMessageEvents(
         bid,
         signal,
-        (e) => handleStreamEvent(bid, e),
+        (event) => handleStreamEvent(bid, event),
         messageEventsSince || undefined,
       )
     })
   }
 
-  // ---- Bot management ----
+  function abort() {
+    if (activeWs?.connected) {
+      activeWs.abort()
+    }
+    abortFn?.()
+    abortFn = null
+    for (const message of messages) {
+      if (message.role === 'assistant' && message.streaming) {
+        message.streaming = false
+      }
+    }
+    streamingSessionId.value = null
+  }
 
   async function ensureBot(): Promise<string | null> {
     try {
       const list = await fetchBots()
       bots.value = list
-      if (!list.length) { currentBotId.value = null; return null }
+      if (!list.length) {
+        currentBotId.value = null
+        return null
+      }
       if (currentBotId.value) {
-        const found = list.find((b) => b.id === currentBotId.value)
+        const found = list.find(bot => bot.id === currentBotId.value)
         if (found && !isPendingBot(found)) return currentBotId.value
       }
-      const ready = list.find((b) => !isPendingBot(b))
+      const ready = list.find(bot => !isPendingBot(bot))
       currentBotId.value = ready ? ready.id : list[0]!.id
       return currentBotId.value
-    } catch (err) {
-      console.error('Failed to fetch bots:', err)
+    } catch (error) {
+      console.error('Failed to fetch bots:', error)
       return currentBotId.value
     }
   }
 
-  // ---- Pagination ----
-
   const PAGE_SIZE = 30
 
   async function loadMessages(botId: string, sid: string) {
-    const rows = await fetchMessages(botId, sid, { limit: PAGE_SIZE })
-    const items = convertMessagesToChats(rows)
-    const serverRowIds = rows.map((r) => r.id).filter(Boolean)
-    replaceMessages(items, serverRowIds)
-    hasMoreOlder.value = true
-    updateSinceFromRows(rows)
+    const turns = await fetchMessagesUI(botId, sid, { limit: PAGE_SIZE })
+    replaceMessages(turns)
+    hasMoreOlder.value = turns.length > 0
   }
 
   async function loadOlderMessages(): Promise<number> {
@@ -776,33 +506,31 @@ export const useChatStore = defineStore('chat', () => {
     const first = messages[0]
     if (!first?.timestamp) return 0
 
-    const before = first.timestamp.toISOString()
     loadingOlder.value = true
     try {
-      const rows = await fetchMessages(bid, sid, { limit: PAGE_SIZE, before })
-      const items = convertMessagesToChats(rows)
-      if (rows.length < PAGE_SIZE) hasMoreOlder.value = false
-      for (const r of rows) {
-        const tid = (r.id ?? '').trim()
-        if (tid) knownServerMessageIds.add(tid)
+      const turns = await fetchMessagesUI(bid, sid, {
+        limit: PAGE_SIZE,
+        before: first.timestamp,
+      })
+      const existingIds = new Set(messages.map(message => message.id))
+      const older = turns
+        .map(normalizeTurn)
+        .filter(turn => !existingIds.has(turn.id))
+      if (older.length === 0) {
+        hasMoreOlder.value = false
+        return 0
       }
-      for (const item of items) {
-        const tid = String(item.id ?? '').trim()
-        if (tid) knownServerMessageIds.add(tid)
-      }
-      messages.unshift(...items)
-      return items.length
+      messages.unshift(...older)
+      return older.length
     } finally {
       loadingOlder.value = false
     }
   }
 
-  // ---- Session CRUD ----
-
   function touchSession(targetSessionId: string) {
-    const idx = sessions.value.findIndex((s) => s.id === targetSessionId)
-    if (idx < 0) return
-    const [target] = sessions.value.splice(idx, 1)
+    const index = sessions.value.findIndex(session => session.id === targetSessionId)
+    if (index < 0) return
+    const [target] = sessions.value.splice(index, 1)
     if (!target) return
     target.updated_at = new Date().toISOString()
     sessions.value.unshift(target)
@@ -813,19 +541,16 @@ export const useChatStore = defineStore('chat', () => {
     const bid = currentBotId.value ?? await ensureBot()
     if (!bid) throw new Error('Bot not ready')
     const created = await createSession(bid)
-    sessions.value = [created, ...sessions.value.filter((s) => s.id !== created.id)]
+    sessions.value = [created, ...sessions.value.filter(session => session.id !== created.id)]
     sessionId.value = created.id
     replaceMessages([])
   }
 
-  // ---- Initialize ----
-
   async function initialize() {
     if (initializing.value) return
     initializing.value = true
     loadingChats.value = true
     stopMessageEvents()
-    stopLocalStream()
     stopWebSocket()
     try {
       const bid = await ensureBot()
@@ -836,6 +561,7 @@ export const useChatStore = defineStore('chat', () => {
         replaceMessages([])
         return
       }
+
       const visible = await fetchSessions(bid)
       sessions.value = visible
       if (!visible.length) {
@@ -843,15 +569,15 @@ export const useChatStore = defineStore('chat', () => {
         sessionId.value = null
         replaceMessages([])
       } else {
-        const activeSessionId = sessionId.value && visible.some((s) => s.id === sessionId.value)
+        const activeSessionId = sessionId.value && visible.some(session => session.id === sessionId.value)
           ? sessionId.value
           : visible[0]!.id
         sessionId.value = activeSessionId
         await loadMessages(bid, activeSessionId)
       }
+
       startWebSocket(bid)
       startMessageEvents(bid)
-      startLocalStream(bid)
     } finally {
       loadingChats.value = false
       initializing.value = false
@@ -895,7 +621,7 @@ export const useChatStore = defineStore('chat', () => {
       const bid = currentBotId.value ?? ''
       if (!bid) throw new Error('Bot not selected')
       await requestDeleteSession(bid, delId)
-      const remaining = sessions.value.filter((s) => s.id !== delId)
+      const remaining = sessions.value.filter(session => session.id !== delId)
       sessions.value = remaining
       if (sessionId.value !== delId) return
       if (!remaining.length) {
@@ -910,13 +636,12 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  // ---- Send message (blocks-based streaming) ----
-
   async function sendMessage(text: string, attachments?: ChatAttachment[]) {
     const trimmed = text.trim()
     if ((!trimmed && !attachments?.length) || streaming.value || !currentBotId.value) return
 
     loading.value = true
+    let assistantTurn: ChatAssistantTurn | null = null
 
     try {
       await ensureActiveSession()
@@ -925,84 +650,64 @@ export const useChatStore = defineStore('chat', () => {
       const sid = sessionId.value!
       streamingSessionId.value = sid
 
-      const userBlocks: ContentBlock[] = []
-      if (trimmed) userBlocks.push({ type: 'text', content: trimmed })
-      if (attachments?.length) {
-        userBlocks.push({
-          type: 'attachment',
-          attachments: attachments.map((a) => ({
-            type: a.type,
-            name: a.name ?? '',
-            mime: a.mime ?? '',
-            url: a.base64,
-          })),
-        })
-      }
-      messages.push({
-        id: nextId(),
-        role: 'user',
-        blocks: userBlocks,
-        timestamp: new Date(),
-        streaming: false,
-      })
-
-      messages.push({
-        id: nextId(),
-        role: 'assistant',
-        blocks: [],
-        timestamp: new Date(),
-        streaming: true,
-      })
-      const assistantMsg = messages[messages.length - 1]!
-      const completion = new Promise<void>((resolve, reject) => {
-        pendingAssistantStream = {
-          assistantMsg,
-          textBlockIdx: -1,
-          thinkingBlockIdx: -1,
-          deferredAttachments: [],
-          done: false,
-          resolve,
-          reject,
-        }
-      })
-
-      abortFn = () => {
-        const abortError = new Error('aborted')
-        abortError.name = 'AbortError'
-        if (activeWs) {
-          activeWs.abort()
-        }
-        rejectPendingAssistantStream(abortError)
-      }
+      messages.push(createOptimisticUserTurn(trimmed, attachments))
+      messages.push(createOptimisticAssistantTurn())
+      assistantTurn = messages[messages.length - 1] as ChatAssistantTurn
 
       const modelId = overrideModelId.value || undefined
-      const re = overrideReasoningEffort.value
-      const reasoningEffort = (re && re !== 'off') ? re : undefined
-      if (activeWs?.connected) {
-        activeWs.send({ type: 'message', text: trimmed, session_id: sid, attachments, model_id: modelId, reasoning_effort: reasoningEffort })
-      } else {
-        await sendLocalChannelMessage(bid, trimmed, attachments, { modelId, reasoningEffort })
-      }
-      await completion
+      const effort = overrideReasoningEffort.value
+      const reasoningEffort = effort && effort !== 'off' ? effort : undefined
 
-      assistantMsg.streaming = false
+      const ws = ensureWebSocket(bid)
+      if (ws) {
+        const completion = createCompletionForAssistantTurn(assistantTurn)
+        abortFn = () => {
+          const abortError = new Error('aborted')
+          abortError.name = 'AbortError'
+          ws.abort()
+          rejectPendingAssistantStream(abortError)
+        }
+        ws.send({
+          type: 'message',
+          text: trimmed,
+          session_id: sid,
+          attachments,
+          model_id: modelId,
+          reasoning_effort: reasoningEffort,
+        })
+        await completion
+        await refreshCurrentSession(bid, sid)
+      } else {
+        void createCompletionForAssistantTurn(assistantTurn).catch(() => {})
+        await sendLocalChannelMessage(bid, trimmed, attachments, { modelId, reasoningEffort })
+        await refreshCurrentSession(bid, sid)
+      }
+
+      assistantTurn.streaming = false
       streamingSessionId.value = null
       loading.value = false
       abortFn = null
       touchSession(sid)
-    } catch (err) {
-      const isAbort = err instanceof Error && err.name === 'AbortError'
-      const reason = err instanceof Error ? err.message : 'Unknown error'
-      const last = messages[messages.length - 1]
-      if (!isAbort && last?.role === 'assistant' && last.streaming) {
-        last.blocks = [{ type: 'text', content: `Failed to send message: ${reason}` }]
-        last.streaming = false
+    } catch (error) {
+      const isAbort = error instanceof Error && error.name === 'AbortError'
+      const reason = error instanceof Error ? error.message : 'Unknown error'
+      if (!isAbort && assistantTurn) {
+        assistantTurn.messages = [{
+          id: 0,
+          type: 'text',
+          content: `Failed to send message: ${reason}`,
+        }]
+        assistantTurn.streaming = false
       } else if (!isAbort) {
         messages.push({
           id: nextId(),
           role: 'assistant',
-          blocks: [{ type: 'text', content: `Failed to send message: ${reason}` }],
-          timestamp: new Date(),
+          messages: [{
+            id: 0,
+            type: 'text',
+            content: `Failed to send message: ${reason}`,
+          }],
+          timestamp: new Date().toISOString(),
           streaming: false,
         })
       }
@@ -1018,7 +723,6 @@ export const useChatStore = defineStore('chat', () => {
     replaceMessages([])
   }
 
-  // Backward-compatible aliases
   const chats = sessions
   const chatId = sessionId
 
@@ -1056,9 +760,3 @@ export const useChatStore = defineStore('chat', () => {
   }
 })
 
-function extractFallbackText(event: StreamEvent): string | null {
-  if (typeof event.delta === 'string') return event.delta
-  if (typeof (event as Record<string, unknown>).text === 'string') return (event as Record<string, unknown>).text as string
-  if (typeof (event as Record<string, unknown>).content === 'string') return (event as Record<string, unknown>).content as string
-  return null
-}
diff --git a/apps/web/src/store/chat-list.utils.test.ts b/apps/web/src/store/chat-list.utils.test.ts
new file mode 100644
index 00000000..a3faf306
--- /dev/null
+++ b/apps/web/src/store/chat-list.utils.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import { shouldRefreshFromMessageCreated, upsertById } from './chat-list.utils'
+
+describe('chat-list.utils', () => {
+  it('replaces existing item with same id and preserves order', () => {
+    const items = [
+      { id: 2, content: 'second' },
+      { id: 4, content: 'fourth' },
+    ]
+
+    expect(upsertById(items, { id: 2, content: 'updated' })).toEqual([
+      { id: 2, content: 'updated' },
+      { id: 4, content: 'fourth' },
+    ])
+  })
+
+  it('inserts new item and sorts by id', () => {
+    const items = [
+      { id: 4, content: 'fourth' },
+      { id: 8, content: 'eighth' },
+    ]
+
+    expect(upsertById(items, { id: 6, content: 'sixth' })).toEqual([
+      { id: 4, content: 'fourth' },
+      { id: 6, content: 'sixth' },
+      { id: 8, content: 'eighth' },
+    ])
+  })
+
+  it('refreshes only for current session message_created events', () => {
+    expect(shouldRefreshFromMessageCreated('bot-1', 'session-1', null, {
+      type: 'message_created',
+      bot_id: 'bot-1',
+      message: {
+        id: 'm1',
+        bot_id: 'bot-1',
+        session_id: 'session-1',
+        role: 'user',
+        content: 'hello',
+        created_at: '2026-04-10T10:00:00Z',
+      },
+    })).toBe(true)
+
+    expect(shouldRefreshFromMessageCreated('bot-1', 'session-1', null, {
+      type: 'message_created',
+      bot_id: 'bot-1',
+      message: {
+        id: 'm2',
+        bot_id: 'bot-1',
+        session_id: 'session-2',
+        role: 'user',
+        content: 'hello',
+        created_at: '2026-04-10T10:00:00Z',
+      },
+    })).toBe(false)
+
+    expect(shouldRefreshFromMessageCreated('bot-1', 'session-1', null, {
+      type: 'session_title_updated',
+      bot_id: 'bot-1',
+      session_id: 'session-1',
+      title: 'new title',
+    })).toBe(false)
+  })
+
+  it('does not refresh current session while a local stream is active', () => {
+    expect(shouldRefreshFromMessageCreated('bot-1', 'session-1', 'session-1', {
+      type: 'message_created',
+      bot_id: 'bot-1',
+      message: {
+        id: 'm3',
+        bot_id: 'bot-1',
+        session_id: 'session-1',
+        role: 'user',
+        content: 'hello',
+        created_at: '2026-04-10T10:00:00Z',
+      },
+    })).toBe(false)
+  })
+})
diff --git a/apps/web/src/store/chat-list.utils.ts b/apps/web/src/store/chat-list.utils.ts
new file mode 100644
index 00000000..3bd1ac21
--- /dev/null
+++ b/apps/web/src/store/chat-list.utils.ts
@@ -0,0 +1,38 @@
+import type { MessageStreamEvent } from '@/composables/api/useChat'
+
+export function upsertById<T extends { id: number }>(items: T[], incoming: T): T[] {
+  const next = [...items]
+  const index = next.findIndex(item => item.id === incoming.id)
+  if (index >= 0) {
+    next[index] = incoming
+  } else {
+    next.push(incoming)
+    next.sort((a, b) => a.id - b.id)
+  }
+  return next
+}
+
+export function shouldRefreshFromMessageCreated(
+  targetBotId: string,
+  currentSessionId: string | null,
+  streamingSessionId: string | null,
+  event: MessageStreamEvent,
+): boolean {
+  if ((event.type ?? '').toLowerCase() !== 'message_created') return false
+
+  const raw = event.message
+  if (!raw) return false
+
+  const eventBotId = String(event.bot_id ?? '').trim()
+  if (eventBotId && eventBotId !== targetBotId) return false
+
+  const messageBotId = String(raw.bot_id ?? '').trim()
+  if (messageBotId && messageBotId !== targetBotId) return false
+
+  const messageSessionId = String(raw.session_id ?? '').trim()
+  if (!currentSessionId) return false
+  if (messageSessionId && messageSessionId !== currentSessionId) return false
+  if (streamingSessionId && streamingSessionId === currentSessionId) return false
+
+  return true
+}
diff --git a/internal/agent/agent.go b/internal/agent/agent.go
index 35010f6f..f5603fc8 100644
--- a/internal/agent/agent.go
+++ b/internal/agent/agent.go
@@ -216,6 +216,14 @@ func (a *Agent) runStream(ctx context.Context, cfg RunConfig, ch chan<- StreamEv
 				Input:      p.Input,
 			}
 
+		case *sdk.ToolProgressPart:
+			ch <- StreamEvent{
+				Type:       EventToolCallProgress,
+				ToolName:   p.ToolName,
+				ToolCallID: p.ToolCallID,
+				Progress:   p.Content,
+			}
+
 		case *sdk.StreamToolResultPart:
 			shouldAbort := false
 			if _, ok := toolLoopAbortCallIDs[p.ToolCallID]; ok {
diff --git a/internal/agent/stream.go b/internal/agent/stream.go
index 766b7293..9c2edcae 100644
--- a/internal/agent/stream.go
+++ b/internal/agent/stream.go
@@ -6,21 +6,22 @@ import "encoding/json"
 type StreamEventType string
 
 const (
-	EventAgentStart     StreamEventType = "agent_start"
-	EventTextStart      StreamEventType = "text_start"
-	EventTextDelta      StreamEventType = "text_delta"
-	EventTextEnd        StreamEventType = "text_end"
-	EventReasoningStart StreamEventType = "reasoning_start"
-	EventReasoningDelta StreamEventType = "reasoning_delta"
-	EventReasoningEnd   StreamEventType = "reasoning_end"
-	EventToolCallStart  StreamEventType = "tool_call_start"
-	EventToolCallEnd    StreamEventType = "tool_call_end"
-	EventAttachment     StreamEventType = "attachment_delta"
-	EventReaction       StreamEventType = "reaction_delta"
-	EventSpeech         StreamEventType = "speech_delta"
-	EventAgentEnd       StreamEventType = "agent_end"
-	EventAgentAbort     StreamEventType = "agent_abort"
-	EventError          StreamEventType = "error"
+	EventAgentStart       StreamEventType = "agent_start"
+	EventTextStart        StreamEventType = "text_start"
+	EventTextDelta        StreamEventType = "text_delta"
+	EventTextEnd          StreamEventType = "text_end"
+	EventReasoningStart   StreamEventType = "reasoning_start"
+	EventReasoningDelta   StreamEventType = "reasoning_delta"
+	EventReasoningEnd     StreamEventType = "reasoning_end"
+	EventToolCallStart    StreamEventType = "tool_call_start"
+	EventToolCallProgress StreamEventType = "tool_call_progress"
+	EventToolCallEnd      StreamEventType = "tool_call_end"
+	EventAttachment       StreamEventType = "attachment_delta"
+	EventReaction         StreamEventType = "reaction_delta"
+	EventSpeech           StreamEventType = "speech_delta"
+	EventAgentEnd         StreamEventType = "agent_end"
+	EventAgentAbort       StreamEventType = "agent_abort"
+	EventError            StreamEventType = "error"
 )
 
 // StreamEvent is emitted by the agent during streaming.
@@ -30,6 +31,7 @@ type StreamEvent struct {
 	ToolName    string           `json:"toolName,omitempty"`
 	ToolCallID  string           `json:"toolCallId,omitempty"`
 	Input       any              `json:"input,omitempty"`
+	Progress    any              `json:"progress,omitempty"`
 	Result      any              `json:"result,omitempty"`
 	Attachments []FileAttachment `json:"attachments,omitempty"`
 	Reactions   []ReactionItem   `json:"reactions,omitempty"`
diff --git a/internal/conversation/uimessage.go b/internal/conversation/uimessage.go
new file mode 100644
index 00000000..588cceca
--- /dev/null
+++ b/internal/conversation/uimessage.go
@@ -0,0 +1,96 @@
+package conversation
+
+import (
+	"strings"
+	"time"
+)
+
+// UIMessageType identifies the frontend-friendly message block type.
+type UIMessageType string
+
+const (
+	UIMessageText        UIMessageType = "text"
+	UIMessageReasoning   UIMessageType = "reasoning"
+	UIMessageTool        UIMessageType = "tool"
+	UIMessageAttachments UIMessageType = "attachments"
+)
+
+// UIAttachment is the normalized attachment shape used by the web frontend.
+type UIAttachment struct {
+	ID          string         `json:"id,omitempty"`
+	Type        string         `json:"type"`
+	Path        string         `json:"path,omitempty"`
+	URL         string         `json:"url,omitempty"`
+	Base64      string         `json:"base64,omitempty"`
+	Name        string         `json:"name,omitempty"`
+	ContentHash string         `json:"content_hash,omitempty"`
+	BotID       string         `json:"bot_id,omitempty"`
+	Mime        string         `json:"mime,omitempty"`
+	Size        int64          `json:"size,omitempty"`
+	StorageKey  string         `json:"storage_key,omitempty"`
+	Metadata    map[string]any `json:"metadata,omitempty"`
+}
+
+// UIMessage is the normalized assistant output block used by the web frontend.
+type UIMessage struct {
+	ID          int            `json:"id"`
+	Type        UIMessageType  `json:"type"`
+	Content     string         `json:"content,omitempty"`
+	Name        string         `json:"name,omitempty"`
+	Input       any            `json:"input,omitempty"`
+	Output      any            `json:"output,omitempty"`
+	ToolCallID  string         `json:"tool_call_id,omitempty"`
+	Running     *bool          `json:"running,omitempty"`
+	Progress    []any          `json:"progress,omitempty"`
+	Attachments []UIAttachment `json:"attachments,omitempty"`
+}
+
+// UITurn is the normalized chat turn used by the web frontend.
+type UITurn struct {
+	Role              string         `json:"role"`
+	Messages          []UIMessage    `json:"messages,omitempty"`
+	Text              string         `json:"text,omitempty"`
+	Attachments       []UIAttachment `json:"attachments,omitempty"`
+	Timestamp         time.Time      `json:"timestamp"`
+	Platform          string         `json:"platform,omitempty"`
+	SenderDisplayName string         `json:"sender_display_name,omitempty"`
+	SenderAvatarURL   string         `json:"sender_avatar_url,omitempty"`
+	SenderUserID      string         `json:"sender_user_id,omitempty"`
+	ID                string         `json:"id,omitempty"`
+}
+
+// UIMessageStreamEvent is the generic event shape accepted by the UI stream converter.
+// The handler layer adapts agent/channel events to this struct to avoid package cycles.
+type UIMessageStreamEvent struct {
+	Type        string
+	Delta       string
+	ToolName    string
+	ToolCallID  string
+	Input       any
+	Output      any
+	Progress    any
+	Attachments []UIAttachment
+	Error       string
+}
+
+func uiBoolPtr(v bool) *bool {
+	return &v
+}
+
+func normalizeUIAttachmentType(kind, mime string) string {
+	if trimmed := strings.ToLower(strings.TrimSpace(kind)); trimmed != "" {
+		return trimmed
+	}
+
+	normalizedMime := strings.ToLower(strings.TrimSpace(mime))
+	switch {
+	case strings.HasPrefix(normalizedMime, "image/"):
+		return "image"
+	case strings.HasPrefix(normalizedMime, "audio/"):
+		return "audio"
+	case strings.HasPrefix(normalizedMime, "video/"):
+		return "video"
+	default:
+		return "file"
+	}
+}
diff --git a/internal/conversation/uimessage_convert.go b/internal/conversation/uimessage_convert.go
new file mode 100644
index 00000000..16e3e64c
--- /dev/null
+++ b/internal/conversation/uimessage_convert.go
@@ -0,0 +1,609 @@
+package conversation
+
+import (
+	"encoding/json"
+	"regexp"
+	"strings"
+
+	messagepkg "github.com/memohai/memoh/internal/message"
+)
+
+var (
+	uiMessageYAMLHeaderRe        = regexp.MustCompile(`(?s)\A---\n.*?\n---\n?`)
+	uiMessageAgentTagsRe         = regexp.MustCompile(`(?s)<attachments>.*?</attachments>|<reactions>.*?</reactions>|<speech>.*?</speech>`)
+	uiMessageCollapsedNewlinesRe = regexp.MustCompile(`\n{3,}`)
+)
+
+type uiContentPart struct {
+	Type       string `json:"type"`
+	Text       string `json:"text,omitempty"`
+	URL        string `json:"url,omitempty"`
+	Emoji      string `json:"emoji,omitempty"`
+	ToolCallID string `json:"toolCallId,omitempty"`
+	ToolName   string `json:"toolName,omitempty"`
+	Input      any    `json:"input,omitempty"`
+	Output     any    `json:"output,omitempty"`
+	Result     any    `json:"result,omitempty"`
+}
+
+type uiExtractedToolCall struct {
+	ID    string
+	Name  string
+	Input any
+}
+
+type uiExtractedToolResult struct {
+	ToolCallID string
+	Output     any
+}
+
+type uiPendingAssistantTurn struct {
+	Turn        UITurn
+	NextID      int
+	ToolIndexes map[string]int
+}
+
+// ConvertRawModelMessagesToUIAssistantMessages converts terminal stream payload
+// messages into frontend-friendly assistant UI messages.
+func ConvertRawModelMessagesToUIAssistantMessages(raw json.RawMessage) []UIMessage {
+	if len(raw) == 0 {
+		return nil
+	}
+
+	var messages []ModelMessage
+	if err := json.Unmarshal(raw, &messages); err != nil {
+		return nil
+	}
+	return ConvertModelMessagesToUIAssistantMessages(messages)
+}
+
+// ConvertModelMessagesToUIAssistantMessages converts assistant/tool output
+// messages into frontend-friendly UI message blocks.
+func ConvertModelMessagesToUIAssistantMessages(messages []ModelMessage) []UIMessage {
+	pending := &uiPendingAssistantTurn{
+		ToolIndexes: map[string]int{},
+	}
+
+	for _, modelMessage := range messages {
+		switch strings.ToLower(strings.TrimSpace(modelMessage.Role)) {
+		case "assistant":
+			for _, reasoning := range extractPersistedReasoning(modelMessage) {
+				appendPendingAssistantMessage(pending, UIMessage{
+					Type:    UIMessageReasoning,
+					Content: reasoning,
+				})
+			}
+
+			if text := extractAssistantStreamMessageText(modelMessage); text != "" {
+				appendPendingAssistantMessage(pending, UIMessage{
+					Type:    UIMessageText,
+					Content: text,
+				})
+			}
+
+			for _, call := range extractPersistedToolCalls(modelMessage) {
+				appendPendingAssistantMessage(pending, UIMessage{
+					Type:       UIMessageTool,
+					Name:       call.Name,
+					Input:      call.Input,
+					ToolCallID: call.ID,
+					Running:    uiBoolPtr(true),
+				})
+				if call.ID != "" {
+					pending.ToolIndexes[call.ID] = len(pending.Turn.Messages) - 1
+				}
+			}
+
+		case "tool":
+			for _, toolResult := range extractPersistedToolResults(modelMessage) {
+				idx, ok := pending.ToolIndexes[toolResult.ToolCallID]
+				if !ok || idx < 0 || idx >= len(pending.Turn.Messages) {
+					continue
+				}
+
+				if isHiddenCurrentConversationToolOutput(toolResult.Output) {
+					removePendingAssistantMessage(pending, idx)
+					delete(pending.ToolIndexes, toolResult.ToolCallID)
+					continue
+				}
+
+				pending.Turn.Messages[idx].Output = toolResult.Output
+				pending.Turn.Messages[idx].Running = uiBoolPtr(false)
+			}
+		}
+	}
+
+	for _, idx := range pending.ToolIndexes {
+		if idx >= 0 && idx < len(pending.Turn.Messages) {
+			pending.Turn.Messages[idx].Running = uiBoolPtr(false)
+		}
+	}
+
+	return pending.Turn.Messages
+}
+
+// ConvertMessagesToUITurns converts persisted message rows into frontend-friendly turns.
+func ConvertMessagesToUITurns(messages []messagepkg.Message) []UITurn {
+	result := make([]UITurn, 0, len(messages))
+	var pending *uiPendingAssistantTurn
+
+	flushPending := func() {
+		if pending == nil {
+			return
+		}
+
+		for _, idx := range pending.ToolIndexes {
+			if idx < 0 || idx >= len(pending.Turn.Messages) {
+				continue
+			}
+			pending.Turn.Messages[idx].Running = uiBoolPtr(false)
+		}
+
+		if len(pending.Turn.Messages) > 0 {
+			result = append(result, pending.Turn)
+		}
+		pending = nil
+	}
+
+	for _, raw := range messages {
+		modelMessage := decodePersistedModelMessage(raw)
+		switch strings.ToLower(strings.TrimSpace(raw.Role)) {
+		case "user":
+			flushPending()
+
+			text := extractPersistedMessageText(raw, modelMessage)
+			attachments := uiAttachmentsFromMessageAssets(raw)
+			if text == "" && len(attachments) == 0 {
+				continue
+			}
+
+			turn := UITurn{
+				Role:        "user",
+				Text:        text,
+				Attachments: attachments,
+				Timestamp:   raw.CreatedAt,
+				Platform:    resolveUIPersistencePlatform(raw),
+				ID:          strings.TrimSpace(raw.ID),
+			}
+			if turn.Platform != "" {
+				turn.SenderDisplayName = strings.TrimSpace(raw.SenderDisplayName)
+				turn.SenderAvatarURL = strings.TrimSpace(raw.SenderAvatarURL)
+				turn.SenderUserID = strings.TrimSpace(raw.SenderUserID)
+			}
+			result = append(result, turn)
+
+		case "assistant":
+			toolCalls := extractPersistedToolCalls(modelMessage)
+			text := extractPersistedMessageText(raw, modelMessage)
+			reasonings := extractPersistedReasoning(modelMessage)
+			attachments := uiAttachmentsFromMessageAssets(raw)
+
+			if len(toolCalls) > 0 {
+				if pending == nil {
+					pending = newPendingAssistantTurn(raw)
+				}
+
+				for _, reasoning := range reasonings {
+					appendPendingAssistantMessage(pending, UIMessage{
+						ID:      pending.NextID,
+						Type:    UIMessageReasoning,
+						Content: reasoning,
+					})
+				}
+
+				if text != "" {
+					appendPendingAssistantMessage(pending, UIMessage{
+						ID:      pending.NextID,
+						Type:    UIMessageText,
+						Content: text,
+					})
+				}
+
+				for _, call := range toolCalls {
+					block := UIMessage{
+						ID:         pending.NextID,
+						Type:       UIMessageTool,
+						Name:       call.Name,
+						Input:      call.Input,
+						ToolCallID: call.ID,
+						Running:    uiBoolPtr(true),
+					}
+					appendPendingAssistantMessage(pending, block)
+					if call.ID != "" {
+						pending.ToolIndexes[call.ID] = len(pending.Turn.Messages) - 1
+					}
+				}
+
+				if len(attachments) > 0 {
+					appendPendingAssistantMessage(pending, UIMessage{
+						ID:          pending.NextID,
+						Type:        UIMessageAttachments,
+						Attachments: attachments,
+					})
+				}
+				continue
+			}
+
+			if pending != nil && (text != "" || len(reasonings) > 0 || len(attachments) > 0) {
+				for _, reasoning := range reasonings {
+					appendPendingAssistantMessage(pending, UIMessage{
+						ID:      pending.NextID,
+						Type:    UIMessageReasoning,
+						Content: reasoning,
+					})
+				}
+				if text != "" {
+					appendPendingAssistantMessage(pending, UIMessage{
+						ID:      pending.NextID,
+						Type:    UIMessageText,
+						Content: text,
+					})
+				}
+				if len(attachments) > 0 {
+					appendPendingAssistantMessage(pending, UIMessage{
+						ID:          pending.NextID,
+						Type:        UIMessageAttachments,
+						Attachments: attachments,
+					})
+				}
+				flushPending()
+				continue
+			}
+
+			flushPending()
+
+			assistantMessages := buildStandaloneAssistantMessages(text, reasonings, attachments)
+			if len(assistantMessages) == 0 {
+				continue
+			}
+
+			result = append(result, UITurn{
+				Role:      "assistant",
+				Messages:  assistantMessages,
+				Timestamp: raw.CreatedAt,
+				Platform:  resolveUIPersistencePlatform(raw),
+				ID:        strings.TrimSpace(raw.ID),
+			})
+
+		case "tool":
+			if pending == nil {
+				continue
+			}
+
+			for _, toolResult := range extractPersistedToolResults(modelMessage) {
+				idx, ok := pending.ToolIndexes[toolResult.ToolCallID]
+				if !ok || idx < 0 || idx >= len(pending.Turn.Messages) {
+					continue
+				}
+
+				if isHiddenCurrentConversationToolOutput(toolResult.Output) {
+					removePendingAssistantMessage(pending, idx)
+					delete(pending.ToolIndexes, toolResult.ToolCallID)
+					continue
+				}
+
+				pending.Turn.Messages[idx].Output = toolResult.Output
+				pending.Turn.Messages[idx].Running = uiBoolPtr(false)
+			}
+		}
+	}
+
+	flushPending()
+	return result
+}
+
+func newPendingAssistantTurn(raw messagepkg.Message) *uiPendingAssistantTurn {
+	return &uiPendingAssistantTurn{
+		Turn: UITurn{
+			Role:      "assistant",
+			Timestamp: raw.CreatedAt,
+			Platform:  resolveUIPersistencePlatform(raw),
+			ID:        strings.TrimSpace(raw.ID),
+		},
+		ToolIndexes: map[string]int{},
+	}
+}
+
+func appendPendingAssistantMessage(pending *uiPendingAssistantTurn, message UIMessage) {
+	if pending == nil {
+		return
+	}
+	message.ID = pending.NextID
+	pending.NextID++
+	pending.Turn.Messages = append(pending.Turn.Messages, message)
+}
+
+func removePendingAssistantMessage(pending *uiPendingAssistantTurn, idx int) {
+	if pending == nil || idx < 0 || idx >= len(pending.Turn.Messages) {
+		return
+	}
+
+	pending.Turn.Messages = append(pending.Turn.Messages[:idx], pending.Turn.Messages[idx+1:]...)
+	for callID, currentIdx := range pending.ToolIndexes {
+		switch {
+		case currentIdx == idx:
+			delete(pending.ToolIndexes, callID)
+		case currentIdx > idx:
+			pending.ToolIndexes[callID] = currentIdx - 1
+		}
+	}
+}
+
+func buildStandaloneAssistantMessages(text string, reasonings []string, attachments []UIAttachment) []UIMessage {
+	messages := make([]UIMessage, 0, len(reasonings)+2)
+	nextID := 0
+	for _, reasoning := range reasonings {
+		messages = append(messages, UIMessage{
+			ID:      nextID,
+			Type:    UIMessageReasoning,
+			Content: reasoning,
+		})
+		nextID++
+	}
+	if text != "" {
+		messages = append(messages, UIMessage{
+			ID:      nextID,
+			Type:    UIMessageText,
+			Content: text,
+		})
+		nextID++
+	}
+	if len(attachments) > 0 {
+		messages = append(messages, UIMessage{
+			ID:          nextID,
+			Type:        UIMessageAttachments,
+			Attachments: attachments,
+		})
+	}
+	return messages
+}
+
+func decodePersistedModelMessage(raw messagepkg.Message) ModelMessage {
+	var message ModelMessage
+	if err := json.Unmarshal(raw.Content, &message); err != nil {
+		return ModelMessage{
+			Role:    raw.Role,
+			Content: raw.Content,
+		}
+	}
+	message.Role = raw.Role
+	return message
+}
+
+func extractPersistedMessageText(raw messagepkg.Message, message ModelMessage) string {
+	if strings.EqualFold(raw.Role, "user") {
+		if text := strings.TrimSpace(raw.DisplayContent); text != "" {
+			return text
+		}
+	}
+
+	text := strings.TrimSpace(extractTextFromPersistedContent(message.Content))
+	if text == "" {
+		return ""
+	}
+
+	if strings.EqualFold(raw.Role, "user") {
+		return strings.TrimSpace(stripPersistedYAMLHeader(text))
+	}
+	return strings.TrimSpace(stripPersistedAgentTags(text))
+}
+
+func extractAssistantStreamMessageText(message ModelMessage) string {
+	return strings.TrimSpace(stripPersistedAgentTags(extractTextFromPersistedContent(message.Content)))
+}
+
+func extractTextFromPersistedContent(raw json.RawMessage) string {
+	if len(raw) == 0 {
+		return ""
+	}
+
+	var text string
+	if err := json.Unmarshal(raw, &text); err == nil {
+		return strings.TrimSpace(text)
+	}
+
+	parts := extractPersistedContentParts(raw)
+	if len(parts) > 0 {
+		lines := make([]string, 0, len(parts))
+		for _, part := range parts {
+			partType := strings.ToLower(strings.TrimSpace(part.Type))
+			if partType == "reasoning" {
+				continue
+			}
+			switch {
+			case partType == "text" && strings.TrimSpace(part.Text) != "":
+				lines = append(lines, strings.TrimSpace(part.Text))
+			case partType == "link" && strings.TrimSpace(part.URL) != "":
+				lines = append(lines, strings.TrimSpace(part.URL))
+			case partType == "emoji" && strings.TrimSpace(part.Emoji) != "":
+				lines = append(lines, strings.TrimSpace(part.Emoji))
+			case strings.TrimSpace(part.Text) != "":
+				lines = append(lines, strings.TrimSpace(part.Text))
+			}
+		}
+		return strings.TrimSpace(strings.Join(lines, "\n"))
+	}
+
+	var object map[string]any
+	if err := json.Unmarshal(raw, &object); err == nil {
+		if value, ok := object["text"].(string); ok {
+			return strings.TrimSpace(value)
+		}
+	}
+
+	return ""
+}
+
+func extractPersistedReasoning(message ModelMessage) []string {
+	parts := extractPersistedContentParts(message.Content)
+	if len(parts) == 0 {
+		return nil
+	}
+
+	reasonings := make([]string, 0, len(parts))
+	for _, part := range parts {
+		if strings.ToLower(strings.TrimSpace(part.Type)) != "reasoning" {
+			continue
+		}
+		if text := strings.TrimSpace(part.Text); text != "" {
+			reasonings = append(reasonings, text)
+		}
+	}
+	return reasonings
+}
+
+func extractPersistedToolCalls(message ModelMessage) []uiExtractedToolCall {
+	parts := extractPersistedContentParts(message.Content)
+	calls := make([]uiExtractedToolCall, 0, len(parts)+len(message.ToolCalls))
+	for _, part := range parts {
+		if strings.ToLower(strings.TrimSpace(part.Type)) != "tool-call" {
+			continue
+		}
+		calls = append(calls, uiExtractedToolCall{
+			ID:    strings.TrimSpace(part.ToolCallID),
+			Name:  strings.TrimSpace(part.ToolName),
+			Input: part.Input,
+		})
+	}
+	if len(calls) > 0 {
+		return calls
+	}
+
+	for _, toolCall := range message.ToolCalls {
+		input := any(nil)
+		if rawArgs := strings.TrimSpace(toolCall.Function.Arguments); rawArgs != "" {
+			if err := json.Unmarshal([]byte(rawArgs), &input); err != nil {
+				input = rawArgs
+			}
+		}
+		calls = append(calls, uiExtractedToolCall{
+			ID:    strings.TrimSpace(toolCall.ID),
+			Name:  strings.TrimSpace(toolCall.Function.Name),
+			Input: input,
+		})
+	}
+	return calls
+}
+
+func extractPersistedToolResults(message ModelMessage) []uiExtractedToolResult {
+	parts := extractPersistedContentParts(message.Content)
+	results := make([]uiExtractedToolResult, 0, len(parts))
+	for _, part := range parts {
+		if strings.ToLower(strings.TrimSpace(part.Type)) != "tool-result" {
+			continue
+		}
+		output := part.Output
+		if output == nil {
+			output = part.Result
+		}
+		results = append(results, uiExtractedToolResult{
+			ToolCallID: strings.TrimSpace(part.ToolCallID),
+			Output:     output,
+		})
+	}
+	if len(results) > 0 {
+		return results
+	}
+
+	if strings.TrimSpace(message.ToolCallID) == "" {
+		return nil
+	}
+
+	var output any
+	if err := json.Unmarshal(message.Content, &output); err != nil {
+		output = strings.TrimSpace(string(message.Content))
+	}
+	return []uiExtractedToolResult{{
+		ToolCallID: strings.TrimSpace(message.ToolCallID),
+		Output:     output,
+	}}
+}
+
+func extractPersistedContentParts(raw json.RawMessage) []uiContentPart {
+	if len(raw) == 0 {
+		return nil
+	}
+
+	var parts []uiContentPart
+	if err := json.Unmarshal(raw, &parts); err == nil {
+		return parts
+	}
+
+	var encoded string
+	if err := json.Unmarshal(raw, &encoded); err == nil {
+		trimmed := strings.TrimSpace(encoded)
+		if strings.HasPrefix(trimmed, "[") && json.Unmarshal([]byte(trimmed), &parts) == nil {
+			return parts
+		}
+	}
+
+	var object struct {
+		Content json.RawMessage `json:"content"`
+	}
+	if err := json.Unmarshal(raw, &object); err == nil && len(object.Content) > 0 {
+		return extractPersistedContentParts(object.Content)
+	}
+
+	return nil
+}
+
+func uiAttachmentsFromMessageAssets(raw messagepkg.Message) []UIAttachment {
+	if len(raw.Assets) == 0 {
+		return nil
+	}
+
+	attachments := make([]UIAttachment, 0, len(raw.Assets))
+	for _, asset := range raw.Assets {
+		attachments = append(attachments, UIAttachment{
+			ID:          strings.TrimSpace(asset.ContentHash),
+			Type:        normalizeUIAttachmentType("", asset.Mime),
+			Name:        strings.TrimSpace(asset.Name),
+			ContentHash: strings.TrimSpace(asset.ContentHash),
+			BotID:       strings.TrimSpace(raw.BotID),
+			Mime:        strings.TrimSpace(asset.Mime),
+			Size:        asset.SizeBytes,
+			StorageKey:  strings.TrimSpace(asset.StorageKey),
+			Metadata:    asset.Metadata,
+		})
+	}
+	return attachments
+}
+
+func resolveUIPersistencePlatform(raw messagepkg.Message) string {
+	direct := strings.ToLower(strings.TrimSpace(raw.Platform))
+	if direct == "local" {
+		return ""
+	}
+	if direct != "" {
+		return direct
+	}
+
+	if raw.Metadata != nil {
+		if platform, ok := raw.Metadata["platform"].(string); ok {
+			trimmed := strings.ToLower(strings.TrimSpace(platform))
+			if trimmed == "local" {
+				return ""
+			}
+			return trimmed
+		}
+	}
+	return ""
+}
+
+func stripPersistedYAMLHeader(text string) string {
+	return strings.TrimSpace(uiMessageYAMLHeaderRe.ReplaceAllString(text, ""))
+}
+
+func stripPersistedAgentTags(text string) string {
+	stripped := uiMessageAgentTagsRe.ReplaceAllString(text, "")
+	return strings.TrimSpace(uiMessageCollapsedNewlinesRe.ReplaceAllString(stripped, "\n\n"))
+}
+
+func isHiddenCurrentConversationToolOutput(output any) bool {
+	typed, ok := output.(map[string]any)
+	if !ok {
+		return false
+	}
+	delivered, _ := typed["delivered"].(string)
+	return strings.EqualFold(strings.TrimSpace(delivered), "current_conversation")
+}
diff --git a/internal/conversation/uimessage_stream.go b/internal/conversation/uimessage_stream.go
new file mode 100644
index 00000000..90764edd
--- /dev/null
+++ b/internal/conversation/uimessage_stream.go
@@ -0,0 +1,176 @@
+package conversation
+
+import "strings"
+
+type uiTextStreamState struct {
+	ID      int
+	Content string
+}
+
+type uiToolStreamState struct {
+	Message UIMessage
+}
+
+// UIMessageStreamConverter converts low-level stream events into complete UI messages.
+type UIMessageStreamConverter struct {
+	nextID    int
+	text      *uiTextStreamState
+	reasoning *uiTextStreamState
+	tools     map[string]*uiToolStreamState
+}
+
+// NewUIMessageStreamConverter creates a new UI stream converter.
+func NewUIMessageStreamConverter() *UIMessageStreamConverter {
+	return &UIMessageStreamConverter{
+		tools: map[string]*uiToolStreamState{},
+	}
+}
+
+// HandleEvent updates converter state and returns zero or one complete UI messages.
+func (c *UIMessageStreamConverter) HandleEvent(event UIMessageStreamEvent) []UIMessage {
+	switch strings.ToLower(strings.TrimSpace(event.Type)) {
+	case "text_start":
+		c.text = &uiTextStreamState{ID: c.nextMessageID()}
+		return nil
+
+	case "text_delta":
+		if c.text == nil {
+			c.text = &uiTextStreamState{ID: c.nextMessageID()}
+		}
+		c.text.Content += event.Delta
+		return []UIMessage{{
+			ID:      c.text.ID,
+			Type:    UIMessageText,
+			Content: c.text.Content,
+		}}
+
+	case "text_end":
+		c.text = nil
+		return nil
+
+	case "reasoning_start":
+		c.reasoning = &uiTextStreamState{ID: c.nextMessageID()}
+		return nil
+
+	case "reasoning_delta":
+		if c.reasoning == nil {
+			c.reasoning = &uiTextStreamState{ID: c.nextMessageID()}
+		}
+		c.reasoning.Content += event.Delta
+		return []UIMessage{{
+			ID:      c.reasoning.ID,
+			Type:    UIMessageReasoning,
+			Content: c.reasoning.Content,
+		}}
+
+	case "reasoning_end":
+		c.reasoning = nil
+		return nil
+
+	case "tool_call_start":
+		state := &uiToolStreamState{
+			Message: UIMessage{
+				ID:         c.nextMessageID(),
+				Type:       UIMessageTool,
+				Name:       strings.TrimSpace(event.ToolName),
+				Input:      event.Input,
+				ToolCallID: strings.TrimSpace(event.ToolCallID),
+				Running:    uiBoolPtr(true),
+			},
+		}
+		if state.Message.ToolCallID != "" {
+			c.tools[state.Message.ToolCallID] = state
+		}
+		c.text = nil
+		return []UIMessage{state.Message}
+
+	case "tool_call_progress":
+		state := c.findToolState(event.ToolCallID, event.ToolName)
+		if state == nil {
+			state = &uiToolStreamState{
+				Message: UIMessage{
+					ID:         c.nextMessageID(),
+					Type:       UIMessageTool,
+					Name:       strings.TrimSpace(event.ToolName),
+					Input:      event.Input,
+					ToolCallID: strings.TrimSpace(event.ToolCallID),
+					Running:    uiBoolPtr(true),
+				},
+			}
+			if state.Message.ToolCallID != "" {
+				c.tools[state.Message.ToolCallID] = state
+			}
+		}
+		state.Message.Progress = append(state.Message.Progress, event.Progress)
+		if event.Input != nil {
+			state.Message.Input = event.Input
+		}
+		return []UIMessage{cloneToolStreamMessage(state.Message)}
+
+	case "tool_call_end":
+		state := c.findToolState(event.ToolCallID, event.ToolName)
+		if state == nil {
+			state = &uiToolStreamState{
+				Message: UIMessage{
+					ID:         c.nextMessageID(),
+					Type:       UIMessageTool,
+					Name:       strings.TrimSpace(event.ToolName),
+					Input:      event.Input,
+					ToolCallID: strings.TrimSpace(event.ToolCallID),
+				},
+			}
+		}
+		if event.Input != nil {
+			state.Message.Input = event.Input
+		}
+		state.Message.Output = event.Output
+		state.Message.Running = uiBoolPtr(false)
+		if state.Message.ToolCallID != "" {
+			delete(c.tools, state.Message.ToolCallID)
+		}
+		return []UIMessage{cloneToolStreamMessage(state.Message)}
+
+	case "attachment_delta":
+		if len(event.Attachments) == 0 {
+			return nil
+		}
+		return []UIMessage{{
+			ID:          c.nextMessageID(),
+			Type:        UIMessageAttachments,
+			Attachments: append([]UIAttachment(nil), event.Attachments...),
+		}}
+
+	default:
+		return nil
+	}
+}
+
+func (c *UIMessageStreamConverter) nextMessageID() int {
+	id := c.nextID
+	c.nextID++
+	return id
+}
+
+func (c *UIMessageStreamConverter) findToolState(toolCallID, toolName string) *uiToolStreamState {
+	if trimmed := strings.TrimSpace(toolCallID); trimmed != "" {
+		if state, ok := c.tools[trimmed]; ok {
+			return state
+		}
+	}
+
+	normalizedName := strings.TrimSpace(toolName)
+	for _, state := range c.tools {
+		if strings.TrimSpace(state.Message.Name) == normalizedName {
+			return state
+		}
+	}
+	return nil
+}
+
+func cloneToolStreamMessage(message UIMessage) UIMessage {
+	clone := message
+	if len(message.Progress) > 0 {
+		clone.Progress = append([]any(nil), message.Progress...)
+	}
+	return clone
+}
diff --git a/internal/conversation/uimessage_test.go b/internal/conversation/uimessage_test.go
new file mode 100644
index 00000000..386ae9b3
--- /dev/null
+++ b/internal/conversation/uimessage_test.go
@@ -0,0 +1,277 @@
+package conversation
+
+import (
+	"encoding/json"
+	"testing"
+	"time"
+
+	messagepkg "github.com/memohai/memoh/internal/message"
+)
+
+func TestConvertMessagesToUITurnsGroupsAssistantToolAndFiltersCurrentConversationDelivery(t *testing.T) {
+	baseTime := time.Date(2026, 4, 10, 10, 0, 0, 0, time.UTC)
+	messages := []messagepkg.Message{
+		{
+			ID:             "user-1",
+			BotID:          "bot-1",
+			SessionID:      "session-1",
+			Role:           "user",
+			DisplayContent: "hello",
+			Content: mustUIMessageJSON(t, ModelMessage{
+				Role:    "user",
+				Content: mustUIRawJSON(t, "hello"),
+			}),
+			CreatedAt: baseTime,
+		},
+		{
+			ID:        "assistant-1",
+			BotID:     "bot-1",
+			SessionID: "session-1",
+			Role:      "assistant",
+			Content: mustUIMessageJSON(t, ModelMessage{
+				Role: "assistant",
+				Content: mustUIRawJSON(t, []map[string]any{
+					{"type": "reasoning", "text": "thinking"},
+					{"type": "tool-call", "toolCallId": "call-1", "toolName": "read", "input": map[string]any{"path": "/tmp/a.txt"}},
+					{"type": "tool-call", "toolCallId": "call-2", "toolName": "send", "input": map[string]any{"message": "hi"}},
+				}),
+			}),
+			Assets: []messagepkg.MessageAsset{{
+				ContentHash: "hash-1",
+				Mime:        "image/png",
+				StorageKey:  "media/hash-1",
+				Name:        "image.png",
+			}},
+			CreatedAt: baseTime.Add(1 * time.Minute),
+		},
+		{
+			ID:        "tool-1",
+			BotID:     "bot-1",
+			SessionID: "session-1",
+			Role:      "tool",
+			Content: mustUIMessageJSON(t, ModelMessage{
+				Role: "tool",
+				Content: mustUIRawJSON(t, []map[string]any{
+					{"type": "tool-result", "toolCallId": "call-1", "toolName": "read", "result": map[string]any{"structuredContent": map[string]any{"stdout": "hello"}}},
+				}),
+			}),
+			CreatedAt: baseTime.Add(2 * time.Minute),
+		},
+		{
+			ID:        "tool-2",
+			BotID:     "bot-1",
+			SessionID: "session-1",
+			Role:      "tool",
+			Content: mustUIMessageJSON(t, ModelMessage{
+				Role: "tool",
+				Content: mustUIRawJSON(t, []map[string]any{
+					{"type": "tool-result", "toolCallId": "call-2", "toolName": "send", "result": map[string]any{"delivered": "current_conversation"}},
+				}),
+			}),
+			CreatedAt: baseTime.Add(3 * time.Minute),
+		},
+		{
+			ID:        "assistant-2",
+			BotID:     "bot-1",
+			SessionID: "session-1",
+			Role:      "assistant",
+			Content: mustUIMessageJSON(t, ModelMessage{
+				Role:    "assistant",
+				Content: mustUIRawJSON(t, []map[string]any{{"type": "text", "text": "done"}}),
+			}),
+			CreatedAt: baseTime.Add(4 * time.Minute),
+		},
+	}
+
+	turns := ConvertMessagesToUITurns(messages)
+	if len(turns) != 2 {
+		t.Fatalf("expected 2 turns, got %d", len(turns))
+	}
+
+	userTurn := turns[0]
+	if userTurn.Role != "user" || userTurn.Text != "hello" {
+		t.Fatalf("unexpected user turn: %#v", userTurn)
+	}
+
+	assistantTurn := turns[1]
+	if assistantTurn.Role != "assistant" {
+		t.Fatalf("expected assistant turn, got %#v", assistantTurn)
+	}
+	if len(assistantTurn.Messages) != 4 {
+		t.Fatalf("expected 4 assistant messages, got %d", len(assistantTurn.Messages))
+	}
+
+	if assistantTurn.Messages[0].Type != UIMessageReasoning || assistantTurn.Messages[0].Content != "thinking" {
+		t.Fatalf("unexpected reasoning block: %#v", assistantTurn.Messages[0])
+	}
+	if assistantTurn.Messages[1].Type != UIMessageTool || assistantTurn.Messages[1].Name != "read" {
+		t.Fatalf("unexpected tool block: %#v", assistantTurn.Messages[1])
+	}
+	if assistantTurn.Messages[1].Running == nil || *assistantTurn.Messages[1].Running {
+		t.Fatalf("expected tool block to be completed: %#v", assistantTurn.Messages[1])
+	}
+	if assistantTurn.Messages[2].Type != UIMessageAttachments || len(assistantTurn.Messages[2].Attachments) != 1 {
+		t.Fatalf("unexpected attachment block: %#v", assistantTurn.Messages[2])
+	}
+	if assistantTurn.Messages[2].Attachments[0].Type != "image" || assistantTurn.Messages[2].Attachments[0].BotID != "bot-1" {
+		t.Fatalf("unexpected attachment payload: %#v", assistantTurn.Messages[2].Attachments[0])
+	}
+	if assistantTurn.Messages[3].Type != UIMessageText || assistantTurn.Messages[3].Content != "done" {
+		t.Fatalf("unexpected trailing text block: %#v", assistantTurn.Messages[3])
+	}
+
+	for _, block := range assistantTurn.Messages {
+		if block.Type == UIMessageTool && block.Name == "send" {
+			t.Fatalf("expected current conversation delivery tool to be filtered out")
+		}
+	}
+}
+
+func TestConvertMessagesToUITurnsStripsUserYAMLHeaderFallback(t *testing.T) {
+	now := time.Now().UTC()
+	turns := ConvertMessagesToUITurns([]messagepkg.Message{{
+		ID:        "user-1",
+		BotID:     "bot-1",
+		SessionID: "session-1",
+		Role:      "user",
+		Content: mustUIMessageJSON(t, ModelMessage{
+			Role:    "user",
+			Content: mustUIRawJSON(t, "---\nmessage-id: 1\nchannel: telegram\n---\nhello"),
+		}),
+		CreatedAt: now,
+	}})
+
+	if len(turns) != 1 {
+		t.Fatalf("expected 1 turn, got %d", len(turns))
+	}
+	if turns[0].Text != "hello" {
+		t.Fatalf("expected YAML header to be stripped, got %q", turns[0].Text)
+	}
+}
+
+func TestUIMessageStreamConverterAccumulatesToolProgress(t *testing.T) {
+	converter := NewUIMessageStreamConverter()
+
+	start := converter.HandleEvent(UIMessageStreamEvent{
+		Type:       "tool_call_start",
+		ToolName:   "exec",
+		ToolCallID: "call-1",
+		Input:      map[string]any{"command": "ls"},
+	})
+	if len(start) != 1 || start[0].Type != UIMessageTool || start[0].Name != "exec" {
+		t.Fatalf("unexpected tool start event: %#v", start)
+	}
+	if start[0].Running == nil || !*start[0].Running {
+		t.Fatalf("expected running tool start, got %#v", start[0])
+	}
+
+	progressOne := converter.HandleEvent(UIMessageStreamEvent{
+		Type:       "tool_call_progress",
+		ToolName:   "exec",
+		ToolCallID: "call-1",
+		Progress:   "line 1",
+	})
+	progressTwo := converter.HandleEvent(UIMessageStreamEvent{
+		Type:       "tool_call_progress",
+		ToolName:   "exec",
+		ToolCallID: "call-1",
+		Progress:   map[string]any{"line": 2},
+	})
+	if len(progressOne) != 1 || len(progressOne[0].Progress) != 1 {
+		t.Fatalf("unexpected first progress snapshot: %#v", progressOne)
+	}
+	if len(progressTwo) != 1 || len(progressTwo[0].Progress) != 2 {
+		t.Fatalf("unexpected second progress snapshot: %#v", progressTwo)
+	}
+	if progressTwo[0].ID != start[0].ID {
+		t.Fatalf("expected progress snapshots to reuse tool message id")
+	}
+
+	end := converter.HandleEvent(UIMessageStreamEvent{
+		Type:       "tool_call_end",
+		ToolName:   "exec",
+		ToolCallID: "call-1",
+		Output:     map[string]any{"structuredContent": map[string]any{"stdout": "done"}},
+	})
+	if len(end) != 1 || end[0].Running == nil || *end[0].Running {
+		t.Fatalf("expected completed tool snapshot, got %#v", end)
+	}
+	if end[0].ID != start[0].ID || len(end[0].Progress) != 2 {
+		t.Fatalf("expected final snapshot to keep id and progress, got %#v", end[0])
+	}
+}
+
+func TestUIMessageStreamConverterStartsNewTextBlockAfterTool(t *testing.T) {
+	converter := NewUIMessageStreamConverter()
+
+	first := converter.HandleEvent(UIMessageStreamEvent{Type: "text_delta", Delta: "hello"})
+	converter.HandleEvent(UIMessageStreamEvent{Type: "tool_call_start", ToolName: "read", ToolCallID: "call-1"})
+	converter.HandleEvent(UIMessageStreamEvent{Type: "tool_call_end", ToolName: "read", ToolCallID: "call-1"})
+	second := converter.HandleEvent(UIMessageStreamEvent{Type: "text_delta", Delta: "world"})
+
+	if len(first) != 1 || len(second) != 1 {
+		t.Fatalf("expected text snapshots, got first=%#v second=%#v", first, second)
+	}
+	if first[0].ID == second[0].ID {
+		t.Fatalf("expected new text block after tool call, got same id %d", first[0].ID)
+	}
+}
+
+func TestConvertRawModelMessagesToUIAssistantMessagesBuildsTerminalSnapshots(t *testing.T) {
+	raw := mustUIRawJSON(t, []ModelMessage{
+		{
+			Role: "assistant",
+			Content: mustUIRawJSON(t, []map[string]any{
+				{"type": "reasoning", "text": "thinking"},
+				{"type": "tool-call", "toolCallId": "call-1", "toolName": "read", "input": map[string]any{"path": "/tmp/a.txt"}},
+			}),
+		},
+		{
+			Role: "tool",
+			Content: mustUIRawJSON(t, []map[string]any{
+				{"type": "tool-result", "toolCallId": "call-1", "toolName": "read", "result": map[string]any{"structuredContent": map[string]any{"stdout": "ok"}}},
+			}),
+		},
+		{
+			Role: "assistant",
+			Content: mustUIRawJSON(t, []map[string]any{
+				{"type": "text", "text": "final answer"},
+			}),
+		},
+	})
+
+	messages := ConvertRawModelMessagesToUIAssistantMessages(raw)
+	if len(messages) != 3 {
+		t.Fatalf("expected 3 ui messages, got %d", len(messages))
+	}
+	if messages[0].ID != 0 || messages[0].Type != UIMessageReasoning {
+		t.Fatalf("unexpected first ui message: %#v", messages[0])
+	}
+	if messages[1].ID != 1 || messages[1].Type != UIMessageTool {
+		t.Fatalf("unexpected second ui message: %#v", messages[1])
+	}
+	if messages[1].Running == nil || *messages[1].Running {
+		t.Fatalf("expected terminal tool message to be completed: %#v", messages[1])
+	}
+	if messages[2].ID != 2 || messages[2].Type != UIMessageText || messages[2].Content != "final answer" {
+		t.Fatalf("unexpected final ui message: %#v", messages[2])
+	}
+}
+
+func mustUIRawJSON(t *testing.T, value any) json.RawMessage {
+	t.Helper()
+	data, err := json.Marshal(value)
+	if err != nil {
+		t.Fatalf("marshal raw json: %v", err)
+	}
+	return data
+}
+
+func mustUIMessageJSON(t *testing.T, message ModelMessage) json.RawMessage {
+	t.Helper()
+	data, err := json.Marshal(message)
+	if err != nil {
+		t.Fatalf("marshal message: %v", err)
+	}
+	return data
+}
diff --git a/internal/handlers/local_channel.go b/internal/handlers/local_channel.go
index ed7ef91c..337f9217 100644
--- a/internal/handlers/local_channel.go
+++ b/internal/handlers/local_channel.go
@@ -19,6 +19,7 @@ import (
 	"github.com/labstack/echo/v4"
 
 	"github.com/memohai/memoh/internal/accounts"
+	agentpkg "github.com/memohai/memoh/internal/agent"
 	attachmentpkg "github.com/memohai/memoh/internal/attachment"
 	"github.com/memohai/memoh/internal/bots"
 	"github.com/memohai/memoh/internal/channel"
@@ -446,15 +447,50 @@ func (h *LocalChannelHandler) HandleWebSocket(c echo.Context) error {
 			}()
 
 			go func() {
+				converter := conversation.NewUIMessageStreamConverter()
 				for event := range eventCh {
 					processed := h.processWSEvent(streamCtx, botID, event)
 					for _, p := range processed {
-						writer.Send(p)
 						if refs := extractAssetRefsFromProcessedEvent(p); len(refs) > 0 {
 							outboundAssetMu.Lock()
 							outboundAssetRefs = append(outboundAssetRefs, refs...)
 							outboundAssetMu.Unlock()
 						}
+
+						var streamEvent agentpkg.StreamEvent
+						if err := json.Unmarshal(p, &streamEvent); err != nil {
+							continue
+						}
+
+						switch streamEvent.Type {
+						case agentpkg.EventAgentStart:
+							writer.SendJSON(map[string]string{"type": "start"})
+							continue
+						case agentpkg.EventAgentEnd, agentpkg.EventAgentAbort:
+							for _, uiMessage := range conversation.ConvertRawModelMessagesToUIAssistantMessages(streamEvent.Messages) {
+								writer.SendJSON(map[string]any{
+									"type": "message",
+									"data": uiMessage,
+								})
+							}
+							writer.SendJSON(map[string]string{"type": "end"})
+							continue
+						case agentpkg.EventError:
+							message := strings.TrimSpace(streamEvent.Error)
+							if message == "" {
+								message = "stream error"
+							}
+							writer.SendJSON(map[string]string{"type": "error", "message": message})
+							continue
+						}
+
+						uiEvents := converter.HandleEvent(uiStreamEventFromAgentEvent(streamEvent))
+						for _, uiMessage := range uiEvents {
+							writer.SendJSON(map[string]any{
+								"type": "message",
+								"data": uiMessage,
+							})
+						}
 					}
 				}
 				outboundAssetMu.Lock()
@@ -495,6 +531,67 @@ func (h *LocalChannelHandler) authorizeBotAccess(ctx context.Context, channelIde
 	return AuthorizeBotAccess(ctx, h.botService, h.accountService, channelIdentityID, botID)
 }
 
+func uiStreamEventFromAgentEvent(event agentpkg.StreamEvent) conversation.UIMessageStreamEvent {
+	attachments := make([]conversation.UIAttachment, 0, len(event.Attachments))
+	for _, attachment := range event.Attachments {
+		attachments = append(attachments, uiAttachmentFromAgentAttachment(attachment))
+	}
+
+	return conversation.UIMessageStreamEvent{
+		Type:        string(event.Type),
+		Delta:       event.Delta,
+		ToolName:    event.ToolName,
+		ToolCallID:  event.ToolCallID,
+		Input:       event.Input,
+		Output:      event.Result,
+		Progress:    event.Progress,
+		Attachments: attachments,
+		Error:       event.Error,
+	}
+}
+
+func uiAttachmentFromAgentAttachment(attachment agentpkg.FileAttachment) conversation.UIAttachment {
+	result := conversation.UIAttachment{
+		ID:          strings.TrimSpace(attachment.ContentHash),
+		Type:        normalizeWSUIAttachmentType(attachment.Type, attachment.Mime),
+		Path:        strings.TrimSpace(attachment.Path),
+		URL:         strings.TrimSpace(attachment.URL),
+		Name:        strings.TrimSpace(attachment.Name),
+		ContentHash: strings.TrimSpace(attachment.ContentHash),
+		Mime:        strings.TrimSpace(attachment.Mime),
+		Size:        attachment.Size,
+		Metadata:    attachment.Metadata,
+	}
+	if attachment.Metadata != nil {
+		if botID, ok := attachment.Metadata["bot_id"].(string); ok {
+			result.BotID = strings.TrimSpace(botID)
+		}
+		if storageKey, ok := attachment.Metadata["storage_key"].(string); ok {
+			result.StorageKey = strings.TrimSpace(storageKey)
+		}
+	}
+	return result
+}
+
+func normalizeWSUIAttachmentType(kind, mime string) string {
+	normalizedKind := strings.ToLower(strings.TrimSpace(kind))
+	if normalizedKind != "" {
+		return normalizedKind
+	}
+
+	normalizedMime := strings.ToLower(strings.TrimSpace(mime))
+	switch {
+	case strings.HasPrefix(normalizedMime, "image/"):
+		return "image"
+	case strings.HasPrefix(normalizedMime, "audio/"):
+		return "audio"
+	case strings.HasPrefix(normalizedMime, "video/"):
+		return "video"
+	default:
+		return "file"
+	}
+}
+
 // ---------------------------------------------------------------------------
 // WebSocket event processing — attachment ingestion + TTS extraction
 // ---------------------------------------------------------------------------
diff --git a/internal/handlers/message.go b/internal/handlers/message.go
index a68c4287..47b2b024 100644
--- a/internal/handlers/message.go
+++ b/internal/handlers/message.go
@@ -145,6 +145,7 @@ func (h *MessageHandler) ListMessages(c echo.Context) error {
 	}
 
 	before, hasBefore := parseBeforeParam(c.QueryParam("before"))
+	format := strings.ToLower(strings.TrimSpace(c.QueryParam("format")))
 
 	sessionID := strings.TrimSpace(c.QueryParam("session_id"))
 
@@ -172,6 +173,11 @@ func (h *MessageHandler) ListMessages(c echo.Context) error {
 		return echo.NewHTTPError(http.StatusInternalServerError, err.Error())
 	}
 	h.fillAssetMimeFromStorage(c.Request().Context(), botID, messages)
+	if format == "ui" {
+		return c.JSON(http.StatusOK, map[string]any{
+			"items": conversation.ConvertMessagesToUITurns(messages),
+		})
+	}
 	return c.JSON(http.StatusOK, map[string]any{"items": messages})
 }