feat(chat): reasoning activity panel

- Introduced a new ReasoningSidebar component for displaying reasoning details. - Refactored MessageList and StandaloneChat components to utilize renderBlocks for improved message part handling. - Added ReasoningTimeline component to visualize reasoning steps. - Updated message handling logic to differentiate between thinking and content blocks. - Enhanced localization for reasoning-related terms in English, Russian, and Chinese. - Improved styling for various components to ensure consistency and readability.
2026-07-15 17:30:13 +08:00 · 2026-04-23 17:41:05 +08:00
parent 749e2fd57b
commit 41a35cee2c
13 changed files with 945 additions and 453 deletions
--- a/dashboard/src/components/chat/Chat.vue
+++ b/dashboard/src/components/chat/Chat.vue
@@ -368,6 +368,7 @@
              @regenerate-with-model="handleRegenerateMessage"
              @select-bot-text="handleBotTextSelection"
              @open-thread="openThreadPanel"
+              @open-reasoning="openReasoningPanel"
              @open-refs="openRefsSidebar"
            />
          </div>
@@ -467,6 +468,11 @@
      :deleting="deletingThread"
      @delete="deleteThread"
    />
+    <ReasoningSidebar
+      v-model="reasoningPanelOpen"
+      :parts="activeReasoningParts"
+      :is-dark="isDark"
+    />
    <RefsSidebar v-model="refsSidebarOpen" :refs="selectedRefs" />
  </div>
 </template>
@@ -495,10 +501,12 @@ import ProjectView from "@/components/chat/ProjectView.vue";
 import ChatInput from "@/components/chat/ChatInput.vue";
 import ChatMessageList from "@/components/chat/ChatMessageList.vue";
 import type { RegenerateModelSelection } from "@/components/chat/RegenerateMenu.vue";
+import ReasoningSidebar from "@/components/chat/ReasoningSidebar.vue";
 import ThreadPanel from "@/components/chat/ThreadPanel.vue";
 import RefsSidebar from "@/components/chat/message_list_comps/RefsSidebar.vue";
 import { useSessions, type Session } from "@/composables/useSessions";
 import {
+  messageBlocks as buildMessageBlocks,
  useMessages,
  type ChatRecord,
  type ChatThread,
@@ -587,6 +595,11 @@ const shouldStickToBottom = ref(true);
 const replyTarget = ref<ChatRecord | null>(null);
 const threadPanelOpen = ref(false);
 const activeThread = ref<ChatThread | null>(null);
+const reasoningPanelOpen = ref(false);
+const activeReasoningTarget = ref<{
+  message: ChatRecord;
+  blockIndex: number;
+} | null>(null);
 const deletingThread = ref(false);
 const refsSidebarOpen = ref(false);
 const selectedRefs = ref<Record<string, unknown> | null>(null);
@@ -617,6 +630,20 @@ const chatSidebarDrawer = computed({
 const isSidebarCollapsed = computed(() =>
  lgAndUp.value ? sidebarCollapsed.value : !customizer.chatSidebarOpen,
 );
+const activeReasoningParts = computed<MessagePart[]>(() => {
+  if (!activeReasoningTarget.value) return [];
+  const blocks = buildMessageBlocks(
+    activeReasoningTarget.value.message.content || { type: "bot", message: [] },
+  );
+  const block = blocks[activeReasoningTarget.value.blockIndex];
+  return block?.kind === "thinking" ? block.parts : [];
+});
+
+watch(reasoningPanelOpen, (open) => {
+  if (!open) {
+    activeReasoningTarget.value = null;
+  }
+});

 const {
  loadingMessages,
@@ -1146,16 +1173,35 @@ async function createThreadFromSelection() {
 }

 function openThreadPanel(thread: ChatThread) {
+  reasoningPanelOpen.value = false;
+  activeReasoningTarget.value = null;
+  refsSidebarOpen.value = false;
  activeThread.value = thread;
  threadPanelOpen.value = true;
 }

 function openRefsSidebar(refs: unknown) {
+  threadPanelOpen.value = false;
+  activeThread.value = null;
+  reasoningPanelOpen.value = false;
+  activeReasoningTarget.value = null;
  selectedRefs.value =
    refs && typeof refs === "object" ? (refs as Record<string, unknown>) : null;
  refsSidebarOpen.value = true;
 }

+function openReasoningPanel(payload: {
+  message: ChatRecord;
+  blockIndex: number;
+}) {
+  threadPanelOpen.value = false;
+  activeThread.value = null;
+  refsSidebarOpen.value = false;
+  selectedRefs.value = null;
+  activeReasoningTarget.value = payload;
+  reasoningPanelOpen.value = true;
+}
+
 async function deleteThread(thread: ChatThread) {
  if (deletingThread.value) return;
  if (!(await askForConfirmation(tm("thread.confirmDelete"), confirmDialog))) return;
@@ -1584,6 +1630,23 @@ kbd {
  font: inherit;
 }

+:deep(.hr-node) {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    opacity: 0.5;
+    border-top-width: .3px;
+}
+
+:deep(.paragraph-node) {
+    margin: .5rem 0;
+    line-height: 1.7;
+}
+
+:deep(.list-node) {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+}
+
@media (max-width: 760px) {
  .messages-panel {
    padding: 18px 14px;
--- a/dashboard/src/components/chat/ChatMessageList.vue
+++ b/dashboard/src/components/chat/ChatMessageList.vue
@@ -119,127 +119,141 @@
            </template>

            <template v-else>
-              <ReasoningBlock
-                v-if="thinkingPartsForMessage(msg).length"
-                :parts="thinkingPartsForMessage(msg)"
-                :is-dark="isDark"
-                :initial-expanded="false"
-                :is-streaming="isMessageStreaming(msg, msgIndex)"
-                :has-non-reasoning-content="hasNonReasoningContent(msg)"
-              />
-
              <template
-                v-for="(part, partIndex) in bubbleParts(msg)"
-                :key="`${msgIndex}-${partIndex}-${part.type}`"
+                v-for="(block, blockIndex) in renderBlocks(msg)"
+                :key="`${msgIndex}-block-${blockIndex}-${block.kind}`"
              >
-                <button
-                  v-if="part.type === 'reply'"
-                  class="reply-quote"
-                  type="button"
-                  @click="scrollToMessage(part.message_id)"
-                >
-                  <v-icon size="15">mdi-reply</v-icon>
-                  <span>{{ replyPreview(part.message_id, part.selected_text) }}</span>
-                </button>
-
-                <div
-                  v-else-if="part.type === 'plain' && isUserMessage(msg)"
-                  class="plain-content"
-                >
-                  {{ part.text || "" }}
-                </div>
-
-                <div
-                  v-else-if="part.type === 'plain' && messageThreads(msg).length"
-                  class="threaded-message-content"
-                >
-                  <ThreadedMarkdownMessagePart
-                    :text="part.text || ''"
-                    :threads="messageThreads(msg)"
-                    :refs="resolvedMessageRefs(msg)"
-                    :is-dark="isDark"
-                    :custom-html-tags="customMarkdownTags"
-                    @open-thread="emit('openThread', $event)"
-                  />
-                </div>
-
-                <MarkdownMessagePart
-                  v-else-if="part.type === 'plain'"
-                  :content="part.text || ''"
-                  :refs="resolvedMessageRefs(msg)"
+                <ReasoningBlock
+                  v-if="block.kind === 'thinking'"
+                  :parts="block.parts"
                  :is-dark="isDark"
-                  :custom-html-tags="customMarkdownTags"
+                  :initial-expanded="false"
+                  :is-streaming="isMessageStreaming(msg, msgIndex)"
+                  :has-non-reasoning-content="
+                    hasFollowingContentBlock(msg, blockIndex)
+                  "
+                  :open-in-sidebar="variant === 'main'"
+                  @open="emit('openReasoning', { message: msg, blockIndex })"
                />

-                <button
-                  v-else-if="part.type === 'image'"
-                  class="image-part"
-                  type="button"
-                  @click="openImage(partUrl(part))"
-                >
-                  <img :src="partUrl(part)" :alt="part.filename || 'image'" />
-                </button>
+                <template v-else>
+                  <template
+                    v-for="(part, partIndex) in block.parts"
+                    :key="`${msgIndex}-${blockIndex}-${partIndex}-${part.type}`"
+                  >
+                    <button
+                      v-if="part.type === 'reply'"
+                      class="reply-quote"
+                      type="button"
+                      @click="scrollToMessage(part.message_id)"
+                    >
+                      <v-icon size="15">mdi-reply</v-icon>
+                      <span>{{ replyPreview(part.message_id, part.selected_text) }}</span>
+                    </button>

-                <audio
-                  v-else-if="part.type === 'record'"
-                  class="audio-part"
-                  controls
-                  :src="partUrl(part)"
-                />
+                    <div
+                      v-else-if="part.type === 'plain' && isUserMessage(msg)"
+                      class="plain-content"
+                    >
+                      {{ part.text || "" }}
+                    </div>

-                <video
-                  v-else-if="part.type === 'video'"
-                  class="video-part"
-                  controls
-                  :src="partUrl(part)"
-                />
+                    <div
+                      v-else-if="part.type === 'plain' && messageThreads(msg).length"
+                      class="threaded-message-content"
+                    >
+                      <ThreadedMarkdownMessagePart
+                        :text="part.text || ''"
+                        :threads="messageThreads(msg)"
+                        :refs="resolvedMessageRefs(msg)"
+                        :is-dark="isDark"
+                        :custom-html-tags="customMarkdownTags"
+                        @open-thread="emit('openThread', $event)"
+                      />
+                    </div>

-                <div v-else-if="part.type === 'file'" class="file-part">
-                  <v-icon size="20">mdi-file-document-outline</v-icon>
-                  <span>{{ part.filename || "file" }}</span>
-                  <v-btn
-                    icon="mdi-download"
-                    size="x-small"
-                    variant="text"
-                    :loading="
-                      downloadingFiles.has(
-                        part.attachment_id || part.filename || '',
-                      )
-                    "
-                    @click="downloadPart(part)"
-                  />
-                </div>
+                    <MarkdownMessagePart
+                      v-else-if="part.type === 'plain'"
+                      :content="part.text || ''"
+                      :refs="resolvedMessageRefs(msg)"
+                      :is-dark="isDark"
+                      :custom-html-tags="customMarkdownTags"
+                    />

-                <div v-else-if="part.type === 'tool_call'" class="tool-call-block">
-                  <template v-for="tool in part.tool_calls || []" :key="tool.id || tool.name">
-                    <ToolCallItem v-if="isIPythonToolCall(tool)" :is-dark="isDark">
-                      <template #label>
-                        <v-icon size="16">mdi-code-json</v-icon>
-                        <span>{{ tool.name || "python" }}</span>
-                        <span class="tool-call-inline-status">
-                          {{ toolCallStatusText(tool) }}
-                        </span>
-                      </template>
-                      <template #details>
-                        <IPythonToolBlock
+                    <button
+                      v-else-if="part.type === 'image'"
+                      class="image-part"
+                      type="button"
+                      @click="openImage(partUrl(part))"
+                    >
+                      <img :src="partUrl(part)" :alt="part.filename || 'image'" />
+                    </button>
+
+                    <audio
+                      v-else-if="part.type === 'record'"
+                      class="audio-part"
+                      controls
+                      :src="partUrl(part)"
+                    />
+
+                    <video
+                      v-else-if="part.type === 'video'"
+                      class="video-part"
+                      controls
+                      :src="partUrl(part)"
+                    />
+
+                    <div v-else-if="part.type === 'file'" class="file-part">
+                      <v-icon size="20">mdi-file-document-outline</v-icon>
+                      <span>{{ part.filename || "file" }}</span>
+                      <v-btn
+                        icon="mdi-download"
+                        size="x-small"
+                        variant="text"
+                        :loading="
+                          downloadingFiles.has(
+                            part.attachment_id || part.filename || '',
+                          )
+                        "
+                        @click="downloadPart(part)"
+                      />
+                    </div>
+
+                    <div v-else-if="part.type === 'tool_call'" class="tool-call-block">
+                      <template
+                        v-for="tool in part.tool_calls || []"
+                        :key="tool.id || tool.name"
+                      >
+                        <ToolCallItem v-if="isIPythonToolCall(tool)" :is-dark="isDark">
+                          <template #label>
+                            <v-icon size="16">mdi-code-json</v-icon>
+                            <span>{{ tool.name || "python" }}</span>
+                            <span class="tool-call-inline-status">
+                              {{ toolCallStatusText(tool) }}
+                            </span>
+                          </template>
+                          <template #details>
+                            <IPythonToolBlock
+                              :tool-call="normalizeToolCall(tool)"
+                              :is-dark="isDark"
+                              :show-header="false"
+                              :force-expanded="true"
+                            />
+                          </template>
+                        </ToolCallItem>
+                        <ToolCallCard
+                          v-else
                          :tool-call="normalizeToolCall(tool)"
                          :is-dark="isDark"
-                          :show-header="false"
-                          :force-expanded="true"
                        />
                      </template>
-                    </ToolCallItem>
-                    <ToolCallCard
-                      v-else
-                      :tool-call="normalizeToolCall(tool)"
-                      :is-dark="isDark"
-                    />
-                  </template>
-                </div>
+                    </div>

-                <div v-else class="unknown-part">
-                  {{ formatJson(part) }}
-                </div>
+                    <div v-else class="unknown-part">
+                      {{ formatJson(part) }}
+                    </div>
+                  </template>
+                </template>
              </template>
            </template>
          </div>
@@ -383,7 +397,8 @@ import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownC
 import StyledMenu from "@/components/shared/StyledMenu.vue";
 import {
  displayParts as displayMessageParts,
-  thinkingParts as extractThinkingParts,
+  messageBlocks as buildMessageBlocks,
+  type MessageDisplayBlock,
 } from "@/composables/useMessages";
 import type {
  ChatContent,
@@ -435,6 +450,7 @@ const emit = defineEmits<{
  ];
  selectBotText: [event: MouseEvent, message: ChatRecord];
  openThread: [thread: ChatThread];
+  openReasoning: [payload: { message: ChatRecord; blockIndex: number }];
  openRefs: [refs: unknown];
 }>();

@@ -558,15 +574,21 @@ function showMessageMeta(message: ChatRecord, messageIndex: number) {
 }

 function hasNonReasoningContent(message: ChatRecord) {
-  return bubbleParts(message).some((part) => {
-    if (part.type === "reply") return false;
-    if (part.type === "plain") return Boolean(String(part.text || "").trim());
-    return true;
-  });
+  return renderBlocks(message).some((block) => block.kind === "content");
 }

-function thinkingPartsForMessage(message: ChatRecord) {
-  return extractThinkingParts(messageContent(message));
+function renderBlocks(message: ChatRecord): MessageDisplayBlock[] {
+  if (isUserMessage(message)) {
+    const parts = bubbleParts(message);
+    return parts.length ? [{ kind: "content", parts }] : [];
+  }
+  return buildMessageBlocks(messageContent(message));
+}
+
+function hasFollowingContentBlock(message: ChatRecord, blockIndex: number) {
+  return renderBlocks(message)
+    .slice(blockIndex + 1)
+    .some((block) => block.kind === "content");
 }

 const attachmentTypeStyles: Record<
--- a/dashboard/src/components/chat/MessageList.vue
+++ b/dashboard/src/components/chat/MessageList.vue
@@ -35,124 +35,133 @@
            </div>

            <template v-else>
-              <ReasoningBlock
-                v-if="thinkingPartsForMessage(msg).length"
-                :parts="thinkingPartsForMessage(msg)"
-                :is-dark="isDark"
-                :initial-expanded="false"
-                :is-streaming="isMessageStreaming(msgIndex)"
-                :has-non-reasoning-content="hasNonReasoningContent(msg)"
-              />
-
              <template
-                v-for="(part, partIndex) in messageParts(msg)"
-                :key="`${msgIndex}-${partIndex}-${part.type}`"
+                v-for="(block, blockIndex) in renderBlocks(msg)"
+                :key="`${msgIndex}-block-${blockIndex}-${block.kind}`"
              >
-                <button
-                  v-if="part.type === 'reply'"
-                  class="reply-quote"
-                  type="button"
-                  @click="scrollToMessage(part.message_id)"
-                >
-                  <v-icon size="15">mdi-reply</v-icon>
-                  <span>{{
-                    replyPreview(part.message_id, part.selected_text)
-                  }}</span>
-                </button>
-
-                <div
-                  v-else-if="part.type === 'plain' && isUserMessage(msg)"
-                  class="plain-content"
-                >
-                  {{ part.text || "" }}
-                </div>
-
-                <MarkdownMessagePart
-                  v-else-if="part.type === 'plain'"
-                  :content="part.text || ''"
-                  :refs="resolvedMessageRefs(msg)"
+                <ReasoningBlock
+                  v-if="block.kind === 'thinking'"
+                  :parts="block.parts"
                  :is-dark="isDark"
-                  :custom-html-tags="customMarkdownTags"
+                  :initial-expanded="false"
+                  :is-streaming="isMessageStreaming(msgIndex)"
+                  :has-non-reasoning-content="
+                    hasFollowingContentBlock(msg, blockIndex)
+                  "
                />

-                <button
-                  v-else-if="part.type === 'image'"
-                  class="image-part"
-                  type="button"
-                  @click="openImage(partUrl(part))"
-                >
-                  <img :src="partUrl(part)" :alt="part.filename || 'image'" />
-                </button>
-
-                <audio
-                  v-else-if="part.type === 'record'"
-                  class="audio-part"
-                  controls
-                  :src="partUrl(part)"
-                />
-
-                <video
-                  v-else-if="part.type === 'video'"
-                  class="video-part"
-                  controls
-                  :src="partUrl(part)"
-                />
-
-                <div v-else-if="part.type === 'file'" class="file-part">
-                  <v-icon size="20">mdi-file-document-outline</v-icon>
-                  <span>{{ part.filename || "file" }}</span>
-                  <v-btn
-                    icon="mdi-download"
-                    size="x-small"
-                    variant="text"
-                    :loading="
-                      downloadingFiles.has(
-                        part.attachment_id || part.filename || '',
-                      )
-                    "
-                    @click="downloadPart(part)"
-                  />
-                </div>
-
-                <div
-                  v-else-if="part.type === 'tool_call'"
-                  class="tool-call-block"
-                >
+                <template v-else>
                  <template
-                    v-for="tool in part.tool_calls || []"
-                    :key="tool.id || tool.name"
+                    v-for="(part, partIndex) in block.parts"
+                    :key="`${msgIndex}-${blockIndex}-${partIndex}-${part.type}`"
                  >
-                    <ToolCallItem
-                      v-if="isIPythonToolCall(tool)"
-                      :is-dark="isDark"
+                    <button
+                      v-if="part.type === 'reply'"
+                      class="reply-quote"
+                      type="button"
+                      @click="scrollToMessage(part.message_id)"
                    >
-                      <template #label>
-                        <v-icon size="16">mdi-code-json</v-icon>
-                        <span>{{ tool.name || "python" }}</span>
-                        <span class="tool-call-inline-status">
-                          {{ toolCallStatusText(tool) }}
-                        </span>
-                      </template>
-                      <template #details>
-                        <IPythonToolBlock
+                      <v-icon size="15">mdi-reply</v-icon>
+                      <span>{{
+                        replyPreview(part.message_id, part.selected_text)
+                      }}</span>
+                    </button>
+
+                    <div
+                      v-else-if="part.type === 'plain' && isUserMessage(msg)"
+                      class="plain-content"
+                    >
+                      {{ part.text || "" }}
+                    </div>
+
+                    <MarkdownMessagePart
+                      v-else-if="part.type === 'plain'"
+                      :content="part.text || ''"
+                      :refs="resolvedMessageRefs(msg)"
+                      :is-dark="isDark"
+                      :custom-html-tags="customMarkdownTags"
+                    />
+
+                    <button
+                      v-else-if="part.type === 'image'"
+                      class="image-part"
+                      type="button"
+                      @click="openImage(partUrl(part))"
+                    >
+                      <img :src="partUrl(part)" :alt="part.filename || 'image'" />
+                    </button>
+
+                    <audio
+                      v-else-if="part.type === 'record'"
+                      class="audio-part"
+                      controls
+                      :src="partUrl(part)"
+                    />
+
+                    <video
+                      v-else-if="part.type === 'video'"
+                      class="video-part"
+                      controls
+                      :src="partUrl(part)"
+                    />
+
+                    <div v-else-if="part.type === 'file'" class="file-part">
+                      <v-icon size="20">mdi-file-document-outline</v-icon>
+                      <span>{{ part.filename || "file" }}</span>
+                      <v-btn
+                        icon="mdi-download"
+                        size="x-small"
+                        variant="text"
+                        :loading="
+                          downloadingFiles.has(
+                            part.attachment_id || part.filename || '',
+                          )
+                        "
+                        @click="downloadPart(part)"
+                      />
+                    </div>
+
+                    <div
+                      v-else-if="part.type === 'tool_call'"
+                      class="tool-call-block"
+                    >
+                      <template
+                        v-for="tool in part.tool_calls || []"
+                        :key="tool.id || tool.name"
+                      >
+                        <ToolCallItem
+                          v-if="isIPythonToolCall(tool)"
+                          :is-dark="isDark"
+                        >
+                          <template #label>
+                            <v-icon size="16">mdi-code-json</v-icon>
+                            <span>{{ tool.name || "python" }}</span>
+                            <span class="tool-call-inline-status">
+                              {{ toolCallStatusText(tool) }}
+                            </span>
+                          </template>
+                          <template #details>
+                            <IPythonToolBlock
+                              :tool-call="normalizeToolCall(tool)"
+                              :is-dark="isDark"
+                              :show-header="false"
+                              :force-expanded="true"
+                            />
+                          </template>
+                        </ToolCallItem>
+                        <ToolCallCard
+                          v-else
                          :tool-call="normalizeToolCall(tool)"
                          :is-dark="isDark"
-                          :show-header="false"
-                          :force-expanded="true"
                        />
                      </template>
-                    </ToolCallItem>
-                    <ToolCallCard
-                      v-else
-                      :tool-call="normalizeToolCall(tool)"
-                      :is-dark="isDark"
-                    />
-                  </template>
-                </div>
+                    </div>

-                <div v-else class="unknown-part">
-                  {{ formatJson(part) }}
-                </div>
+                    <div v-else class="unknown-part">
+                      {{ formatJson(part) }}
+                    </div>
+                  </template>
+                </template>
              </template>
            </template>
          </div>
@@ -250,7 +259,8 @@ import ActionRef from "@/components/chat/message_list_comps/ActionRef.vue";
 import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import {
  displayParts as displayMessageParts,
-  thinkingParts as extractThinkingParts,
+  messageBlocks as buildMessageBlocks,
+  type MessageDisplayBlock,
 } from "@/composables/useMessages";
 import type {
  ChatContent,
@@ -305,15 +315,21 @@ function isMessageStreaming(messageIndex: number) {
 }

 function hasNonReasoningContent(message: ChatRecord) {
-  return messageParts(message).some((part) => {
-    if (part.type === "reply") return false;
-    if (part.type === "plain") return Boolean(String(part.text || "").trim());
-    return true;
-  });
+  return renderBlocks(message).some((block) => block.kind === "content");
 }

-function thinkingPartsForMessage(message: ChatRecord) {
-  return extractThinkingParts(messageContent(message));
+function renderBlocks(message: ChatRecord): MessageDisplayBlock[] {
+  if (isUserMessage(message)) {
+    const parts = messageParts(message);
+    return parts.length ? [{ kind: "content", parts }] : [];
+  }
+  return buildMessageBlocks(messageContent(message));
+}
+
+function hasFollowingContentBlock(message: ChatRecord, blockIndex: number) {
+  return renderBlocks(message)
+    .slice(blockIndex + 1)
+    .some((block) => block.kind === "content");
 }

 function partUrl(part: MessagePart) {
--- a/dashboard/src/components/chat/ReasoningSidebar.vue
+++ b/dashboard/src/components/chat/ReasoningSidebar.vue
@@ -0,0 +1,119 @@
+<template>
+  <transition name="slide-left">
+    <aside v-if="modelValue" class="reasoning-sidebar">
+      <div class="reasoning-sidebar-header">
+        <div class="reasoning-sidebar-title">{{ tm("reasoning.thinking") }}</div>
+        <v-btn icon="mdi-close" size="small" variant="text" @click="close" />
+      </div>
+
+      <div class="reasoning-sidebar-body">
+        <ReasoningTimeline
+          v-if="parts.length || reasoning"
+          :parts="parts"
+          :reasoning="reasoning"
+          :is-dark="isDark"
+        />
+        <div v-else class="reasoning-sidebar-empty">
+          {{ tm("reasoning.thinking") }}
+        </div>
+      </div>
+    </aside>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import type { MessagePart } from "@/composables/useMessages";
+import { useModuleI18n } from "@/i18n/composables";
+import ReasoningTimeline from "@/components/chat/message_list_comps/ReasoningTimeline.vue";
+
+defineProps<{
+  modelValue: boolean;
+  parts: MessagePart[];
+  reasoning?: string;
+  isDark?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const { tm } = useModuleI18n("features/chat");
+
+function close() {
+  emit("update:modelValue", false);
+}
+</script>
+
+<style scoped>
+.reasoning-sidebar {
+  width: 380px;
+  height: 100%;
+  border-left: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.reasoning-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 8px;
+}
+
+.reasoning-sidebar-title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.reasoning-sidebar-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 14px 12px;
+  font-size: 14.5px;
+  line-height: 1.62;
+}
+
+.reasoning-sidebar-empty {
+  padding: 12px 2px;
+  color: rgba(var(--v-theme-on-surface), 0.54);
+  font-size: 13px;
+}
+
+@media (max-width: 760px) {
+  .reasoning-sidebar {
+    position: fixed;
+    inset: 0;
+    z-index: 1300;
+    width: 100vw;
+    height: 100dvh;
+    border-left: 0;
+  }
+
+  .reasoning-sidebar-header {
+    min-height: 52px;
+    padding: calc(10px + env(safe-area-inset-top)) 12px 8px;
+    border-bottom: 1px solid rgba(var(--v-border-color), 0.12);
+  }
+
+  .reasoning-sidebar-body {
+    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
+  }
+}
+</style>
--- a/dashboard/src/components/chat/StandaloneChat.vue
+++ b/dashboard/src/components/chat/StandaloneChat.vue
@@ -26,99 +26,108 @@
              </div>

              <template v-else>
-                <ReasoningBlock
-                  v-if="thinkingPartsForMessage(msg).length"
-                  :parts="thinkingPartsForMessage(msg)"
-                  :is-dark="isDark"
-                  :initial-expanded="false"
-                  :is-streaming="isMessageStreaming(msg, msgIndex)"
-                  :has-non-reasoning-content="hasNonReasoningContent(msg)"
-                />
-
                <template
-                  v-for="(part, partIndex) in bubbleParts(msg)"
-                  :key="`${msgIndex}-${partIndex}-${part.type}`"
+                  v-for="(block, blockIndex) in renderBlocks(msg)"
+                  :key="`${msgIndex}-block-${blockIndex}-${block.kind}`"
                >
-                  <div
-                    v-if="part.type === 'plain' && isUserMessage(msg)"
-                    class="plain-content"
-                  >
-                    {{ part.text || "" }}
-                  </div>
-
-                  <MarkdownMessagePart
-                    v-else-if="part.type === 'plain'"
-                    :content="part.text || ''"
-                    :refs="messageRefs(msg)"
+                  <ReasoningBlock
+                    v-if="block.kind === 'thinking'"
+                    :parts="block.parts"
                    :is-dark="isDark"
-                    :custom-html-tags="customMarkdownTags"
+                    :initial-expanded="false"
+                    :is-streaming="isMessageStreaming(msg, msgIndex)"
+                    :has-non-reasoning-content="
+                      hasFollowingContentBlock(msg, blockIndex)
+                    "
                  />

-                  <button
-                    v-else-if="part.type === 'image'"
-                    class="image-part"
-                    type="button"
-                    @click="openImage(partUrl(part))"
-                  >
-                    <img :src="partUrl(part)" :alt="part.filename || 'image'" />
-                  </button>
-
-                  <audio
-                    v-else-if="part.type === 'record'"
-                    class="audio-part"
-                    controls
-                    :src="partUrl(part)"
-                  />
-
-                  <video
-                    v-else-if="part.type === 'video'"
-                    class="video-part"
-                    controls
-                    :src="partUrl(part)"
-                  />
-
-                  <div v-else-if="part.type === 'file'" class="file-part">
-                    <v-icon size="20">mdi-file-document-outline</v-icon>
-                    <span>{{ part.filename || "file" }}</span>
-                  </div>
-
-                  <div
-                    v-else-if="part.type === 'tool_call'"
-                    class="tool-call-block"
-                  >
+                  <template v-else>
                    <template
-                      v-for="tool in part.tool_calls || []"
-                      :key="tool.id || tool.name"
+                      v-for="(part, partIndex) in block.parts"
+                      :key="`${msgIndex}-${blockIndex}-${partIndex}-${part.type}`"
                    >
-                      <ToolCallItem
-                        v-if="isIPythonToolCall(tool)"
-                        :is-dark="isDark"
+                      <div
+                        v-if="part.type === 'plain' && isUserMessage(msg)"
+                        class="plain-content"
                      >
-                        <template #label>
-                          <v-icon size="16">mdi-code-json</v-icon>
-                          <span>{{ tool.name || "python" }}</span>
-                          <span class="tool-call-inline-status">
-                            {{ toolCallStatusText(tool) }}
-                          </span>
-                        </template>
-                        <template #details>
-                          <IPythonToolBlock
+                        {{ part.text || "" }}
+                      </div>
+
+                      <MarkdownMessagePart
+                        v-else-if="part.type === 'plain'"
+                        :content="part.text || ''"
+                        :refs="messageRefs(msg)"
+                        :is-dark="isDark"
+                        :custom-html-tags="customMarkdownTags"
+                      />
+
+                      <button
+                        v-else-if="part.type === 'image'"
+                        class="image-part"
+                        type="button"
+                        @click="openImage(partUrl(part))"
+                      >
+                        <img :src="partUrl(part)" :alt="part.filename || 'image'" />
+                      </button>
+
+                      <audio
+                        v-else-if="part.type === 'record'"
+                        class="audio-part"
+                        controls
+                        :src="partUrl(part)"
+                      />
+
+                      <video
+                        v-else-if="part.type === 'video'"
+                        class="video-part"
+                        controls
+                        :src="partUrl(part)"
+                      />
+
+                      <div v-else-if="part.type === 'file'" class="file-part">
+                        <v-icon size="20">mdi-file-document-outline</v-icon>
+                        <span>{{ part.filename || "file" }}</span>
+                      </div>
+
+                      <div
+                        v-else-if="part.type === 'tool_call'"
+                        class="tool-call-block"
+                      >
+                        <template
+                          v-for="tool in part.tool_calls || []"
+                          :key="tool.id || tool.name"
+                        >
+                          <ToolCallItem
+                            v-if="isIPythonToolCall(tool)"
+                            :is-dark="isDark"
+                          >
+                            <template #label>
+                              <v-icon size="16">mdi-code-json</v-icon>
+                              <span>{{ tool.name || "python" }}</span>
+                              <span class="tool-call-inline-status">
+                                {{ toolCallStatusText(tool) }}
+                              </span>
+                            </template>
+                            <template #details>
+                              <IPythonToolBlock
+                                :tool-call="normalizeToolCall(tool)"
+                                :is-dark="isDark"
+                                :show-header="false"
+                                :force-expanded="true"
+                              />
+                            </template>
+                          </ToolCallItem>
+                          <ToolCallCard
+                            v-else
                            :tool-call="normalizeToolCall(tool)"
                            :is-dark="isDark"
-                            :show-header="false"
-                            :force-expanded="true"
                          />
                        </template>
-                      </ToolCallItem>
-                      <ToolCallCard
-                        v-else
-                        :tool-call="normalizeToolCall(tool)"
-                        :is-dark="isDark"
-                      />
-                    </template>
-                  </div>
+                      </div>

-                  <pre v-else class="unknown-part">{{ formatJson(part) }}</pre>
+                      <pre v-else class="unknown-part">{{ formatJson(part) }}</pre>
+                    </template>
+                  </template>
                </template>
              </template>
            </div>
@@ -187,7 +196,8 @@ import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownC
 import { useMediaHandling } from "@/composables/useMediaHandling";
 import {
  displayParts as displayMessageParts,
-  thinkingParts as extractThinkingParts,
+  messageBlocks as buildMessageBlocks,
+  type MessageDisplayBlock,
  useMessages,
  type ChatRecord,
  type MessagePart,
@@ -337,19 +347,25 @@ function buildOutgoingParts(text: string): MessagePart[] {
 }

 function hasNonReasoningContent(message: ChatRecord) {
-  return bubbleParts(message).some((part) => {
-    if (part.type === "reply") return false;
-    if (part.type === "plain") return Boolean(String(part.text || "").trim());
-    return true;
-  });
+  return renderBlocks(message).some((block) => block.kind === "content");
 }

 function bubbleParts(message: ChatRecord) {
  return displayMessageParts(messageContent(message));
 }

-function thinkingPartsForMessage(message: ChatRecord) {
-  return extractThinkingParts(messageContent(message));
+function renderBlocks(message: ChatRecord): MessageDisplayBlock[] {
+  if (isUserMessage(message)) {
+    const parts = bubbleParts(message);
+    return parts.length ? [{ kind: "content", parts }] : [];
+  }
+  return buildMessageBlocks(messageContent(message));
+}
+
+function hasFollowingContentBlock(message: ChatRecord, blockIndex: number) {
+  return renderBlocks(message)
+    .slice(blockIndex + 1)
+    .some((block) => block.kind === "content");
 }

 async function stopCurrentSession() {
--- a/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
@@ -115,6 +115,8 @@ onMounted(async () => {
 .ipython-tool-block {
    margin-bottom: 12px;
    margin-top: 6px;
+    font-size: inherit;
+    line-height: inherit;
 }

 .ipython-tool-block.compact {
@@ -133,7 +135,7 @@ onMounted(async () => {
 .code-highlighted {
    border-radius: 6px;
    overflow: hidden;
-    font-size: 14px;
+    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
 }
@@ -157,7 +159,7 @@ onMounted(async () => {
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
-    font-size: 13px;
+    font-size: 12px;
    line-height: 1.5;
    background-color: #f5f5f5;
 }
@@ -183,7 +185,7 @@ onMounted(async () => {
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
-    font-size: 13px;
+    font-size: 12px;
    line-height: 1.5;
    background-color: #f5f5f5;
    max-height: 300px;
--- a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
@@ -1,59 +1,32 @@
 <template>
  <div class="reasoning-block" :class="{ 'reasoning-block--dark': isDark }">
-    <button class="reasoning-header" type="button" @click="toggleExpanded">
+    <button
+      class="reasoning-header"
+      :class="{ 'reasoning-header--trigger': openInSidebar }"
+      type="button"
+      @click="handlePrimaryAction"
+    >
      <span class="reasoning-title">
        {{ tm("reasoning.thinking") }}
      </span>
      <v-icon
        size="22"
        class="reasoning-icon"
-        :class="{ 'rotate-90': isExpanded }"
+        :class="{ 'rotate-90': !openInSidebar && isExpanded }"
      >
        mdi-chevron-right
      </v-icon>
    </button>

-    <div v-if="isExpanded" class="reasoning-content animate-fade-in">
-      <template v-for="(part, partIndex) in renderParts" :key="reasoningPartKey(part, partIndex)">
-        <MarkdownRender
-          v-if="part.type === 'think'"
-          :key="`reasoning-${partIndex}-${isDark ? 'dark' : 'light'}`"
-          :content="String(part.think || '')"
-          class="reasoning-text markdown-content"
-          :typewriter="false"
-          :is-dark="isDark"
-        />
-
-        <div v-else-if="part.type === 'tool_call'" class="reasoning-tool-call-block">
-          <template
-            v-for="tool in part.tool_calls || []"
-            :key="String(tool.id || tool.name || partIndex)"
-          >
-            <ToolCallItem v-if="isIPythonToolCall(tool)" :is-dark="isDark">
-              <template #label>
-                <v-icon size="16">mdi-code-json</v-icon>
-                <span>{{ tool.name || "python" }}</span>
-                <span class="tool-call-inline-status">
-                  {{ toolCallStatusText(tool) }}
-                </span>
-              </template>
-              <template #details>
-                <IPythonToolBlock
-                  :tool-call="normalizeToolCall(tool)"
-                  :is-dark="isDark"
-                  :show-header="false"
-                  :force-expanded="true"
-                />
-              </template>
-            </ToolCallItem>
-            <ToolCallCard
-              v-else
-              :tool-call="normalizeToolCall(tool)"
-              :is-dark="isDark"
-            />
-          </template>
-        </div>
-      </template>
+    <div
+      v-if="!openInSidebar && isExpanded"
+      class="reasoning-content animate-fade-in"
+    >
+      <ReasoningTimeline
+        :parts="renderParts"
+        :reasoning="reasoning"
+        :is-dark="isDark"
+      />
    </div>

    <transition :name="previewTransitionName" mode="out-in">
@@ -66,12 +39,9 @@

 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { MarkdownRender } from "markstream-vue";
-import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
-import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
-import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
 import type { MessagePart } from "@/composables/useMessages";
 import { useModuleI18n } from "@/i18n/composables";
+import ReasoningTimeline from "@/components/chat/message_list_comps/ReasoningTimeline.vue";

 const props = defineProps<{
  parts?: MessagePart[];
@@ -80,6 +50,11 @@ const props = defineProps<{
  initialExpanded?: boolean;
  isStreaming?: boolean;
  hasNonReasoningContent?: boolean;
+  openInSidebar?: boolean;
+}>();
+
+const emit = defineEmits<{
+  open: [];
 }>();

 const { tm } = useModuleI18n("features/chat");
@@ -97,6 +72,8 @@ const renderParts = computed<MessagePart[]>(() => {
  return [];
 });

+const openInSidebar = computed(() => Boolean(props.openInSidebar));
+
 const thinkingText = computed(() =>
  renderParts.value
    .filter((part) => part.type === "think")
@@ -107,7 +84,7 @@ const thinkingText = computed(() =>
 const showStreamingPreview = computed(
  () =>
    props.isStreaming &&
-    !isExpanded.value &&
+    (openInSidebar.value || !isExpanded.value) &&
    !props.hasNonReasoningContent &&
    previewText.value,
 );
@@ -118,16 +95,12 @@ const previewTransitionName = computed(() =>
    : "reasoning-preview-fade",
 );

-function toggleExpanded() {
-  isExpanded.value = !isExpanded.value;
-}
-
-function reasoningPartKey(part: MessagePart, index: number) {
-  if (part.type === "tool_call") {
-    const tool = Array.isArray(part.tool_calls) ? part.tool_calls[0] : null;
-    return `${part.type}-${tool?.id || tool?.name || index}`;
+function handlePrimaryAction() {
+  if (openInSidebar.value) {
+    emit("open");
+    return;
  }
-  return `${part.type}-${index}`;
+  isExpanded.value = !isExpanded.value;
 }

 function latestReasoningPreview() {
@@ -165,11 +138,19 @@ function startPreviewTimer() {
 }

 function syncPreviewTimer() {
-  if (props.isStreaming && !isExpanded.value && !props.hasNonReasoningContent) {
+  if (
+    props.isStreaming &&
+    (openInSidebar.value || !isExpanded.value) &&
+    !props.hasNonReasoningContent
+  ) {
    if (!previewTimer && !previewStartTimer) {
      previewStartTimer = setTimeout(() => {
        previewStartTimer = null;
-        if (props.isStreaming && !isExpanded.value && !props.hasNonReasoningContent) {
+        if (
+          props.isStreaming &&
+          (openInSidebar.value || !isExpanded.value) &&
+          !props.hasNonReasoningContent
+        ) {
          startPreviewTimer();
        }
      }, 2000);
@@ -184,38 +165,14 @@ function syncPreviewTimer() {
  }
 }

-function normalizeToolCall(tool: Record<string, unknown>) {
-  const normalized = { ...tool };
-  normalized.args = parseJsonSafe(normalized.args ?? normalized.arguments ?? {});
-  normalized.result = parseJsonSafe(normalized.result);
-  normalized.ts = normalized.ts ?? Date.now() / 1000;
-  if (normalized.result && typeof normalized.result === "object") {
-    normalized.result = JSON.stringify(normalized.result, null, 2);
-  }
-  return normalized;
-}
-
-function isIPythonToolCall(tool: Record<string, unknown>) {
-  const name = String(tool.name || "").toLowerCase();
-  return name.includes("python") || name.includes("ipython");
-}
-
-function toolCallStatusText(tool: Record<string, unknown>) {
-  if (tool.finished_ts) return tm("toolStatus.done");
-  return tm("toolStatus.running");
-}
-
-function parseJsonSafe(value: unknown) {
-  if (typeof value !== "string") return value;
-  try {
-    return JSON.parse(value);
-  } catch {
-    return value;
-  }
-}
-
 watch(
-  () => [props.isStreaming, isExpanded.value, props.hasNonReasoningContent, thinkingText.value],
+  () => [
+    props.isStreaming,
+    isExpanded.value,
+    props.hasNonReasoningContent,
+    thinkingText.value,
+    openInSidebar.value,
+  ],
  syncPreviewTimer,
  {
    immediate: true,
@@ -256,6 +213,10 @@ onBeforeUnmount(() => {
  color: rgba(var(--v-theme-on-surface), 0.88);
 }

+.reasoning-header--trigger {
+  align-items: flex-start;
+}
+
 .reasoning-icon {
  color: currentcolor;
  transition: transform 0.2s ease;
@@ -270,15 +231,13 @@ onBeforeUnmount(() => {
 }

 .reasoning-content {
-  margin-top: 8px;
-  padding: 0;
-  color: rgba(var(--v-theme-on-surface), 0.7);
+  margin-top: 10px;
+  padding: 12px 14px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 18px;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), 0.72);
  animation: fadeIn 0.2s ease-in-out;
-  font-style: italic;
-}
-
-.reasoning-tool-call-block {
-  margin-top: 8px;
  font-style: normal;
 }

@@ -292,18 +251,9 @@ onBeforeUnmount(() => {
  -webkit-line-clamp: 3;
  white-space: pre-line;
  font: inherit;
-  font-style: italic;
-}
-
-.reasoning-text {
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-.tool-call-inline-status {
-  margin-left: 4px;
-  color: rgba(var(--v-theme-on-surface), 0.48);
+  font-size: 14.5px;
+  line-height: 1.62;
+  font-style: normal;
 }

 .animate-fade-in {
--- a/dashboard/src/components/chat/message_list_comps/ReasoningTimeline.vue
+++ b/dashboard/src/components/chat/message_list_comps/ReasoningTimeline.vue
@@ -0,0 +1,265 @@
+<template>
+  <div v-if="timelineEntries.length" class="reasoning-timeline">
+    <div
+      v-for="(entry, entryIndex) in timelineEntries"
+      :key="entry.key"
+      class="reasoning-timeline-item"
+    >
+      <div class="reasoning-timeline-rail" aria-hidden="true">
+        <span class="reasoning-timeline-dot"></span>
+        <span
+          v-if="entryIndex < timelineEntries.length - 1"
+          class="reasoning-timeline-line"
+        ></span>
+      </div>
+
+      <div class="reasoning-step">
+        <div class="reasoning-step-meta">
+          <span class="reasoning-step-title">{{ entry.title }}</span>
+        </div>
+
+        <MarkdownRender
+          v-if="entry.kind === 'think'"
+          :content="entry.think || ''"
+          class="reasoning-text markdown-content"
+          :typewriter="false"
+          :is-dark="isDark"
+        />
+
+        <div v-else-if="entry.tool" class="reasoning-tool-call-block">
+          <ToolCallItem v-if="isIPythonToolCall(entry.tool)" :is-dark="isDark">
+            <template #label>
+              <v-icon size="16">mdi-code-json</v-icon>
+              <span>{{ entry.tool.name || "python" }}</span>
+              <span class="tool-call-inline-status">
+                {{ toolCallStatusText(entry.tool) }}
+              </span>
+            </template>
+            <template #details>
+              <IPythonToolBlock
+                :tool-call="entry.tool"
+                :is-dark="isDark"
+                :show-header="false"
+                :force-expanded="true"
+              />
+            </template>
+          </ToolCallItem>
+          <ToolCallCard
+            v-else
+            :tool-call="entry.tool"
+            :is-dark="isDark"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { MarkdownRender } from "markstream-vue";
+import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
+import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
+import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
+import type { MessagePart } from "@/composables/useMessages";
+import { useModuleI18n } from "@/i18n/composables";
+
+const props = defineProps<{
+  parts?: MessagePart[];
+  reasoning?: string;
+  isDark?: boolean;
+}>();
+
+const { tm } = useModuleI18n("features/chat");
+
+type NormalizedToolCall = Record<string, unknown>;
+
+type TimelineEntry =
+  | {
+      key: string;
+      kind: "think";
+      title: string;
+      think: string;
+    }
+  | {
+      key: string;
+      kind: "tool_call";
+      title: string;
+      tool: NormalizedToolCall;
+    };
+
+const renderParts = computed<MessagePart[]>(() => {
+  if (props.parts?.length) return props.parts;
+  if (props.reasoning) {
+    return [{ type: "think", think: props.reasoning }];
+  }
+  return [];
+});
+
+const timelineEntries = computed<TimelineEntry[]>(() => {
+  const entries: TimelineEntry[] = [];
+
+  renderParts.value.forEach((part, partIndex) => {
+    if (part.type === "think") {
+      const think = String(part.think || "");
+      if (!think.trim()) return;
+      entries.push({
+        key: `think-${partIndex}`,
+        kind: "think",
+        title: tm("reasoning.think"),
+        think,
+      });
+      return;
+    }
+
+    if (part.type !== "tool_call" || !Array.isArray(part.tool_calls)) return;
+
+    part.tool_calls.forEach((tool, toolIndex) => {
+      const normalizedTool = normalizeToolCall(tool);
+      entries.push({
+        key: `tool-${String(tool.id || tool.name || `${partIndex}-${toolIndex}`)}`,
+        kind: "tool_call",
+        title: tm("reasoning.toolUsed"),
+        tool: normalizedTool,
+      });
+    });
+  });
+
+  return entries;
+});
+
+function normalizeToolCall(tool: Record<string, unknown>) {
+  const normalized = { ...tool };
+  normalized.args = parseJsonSafe(normalized.args ?? normalized.arguments ?? {});
+  normalized.result = parseJsonSafe(normalized.result);
+  normalized.ts = normalized.ts ?? Date.now() / 1000;
+  if (normalized.result && typeof normalized.result === "object") {
+    normalized.result = JSON.stringify(normalized.result, null, 2);
+  }
+  return normalized;
+}
+
+function isIPythonToolCall(tool: Record<string, unknown>) {
+  const name = String(tool.name || "").toLowerCase();
+  return name.includes("python") || name.includes("ipython");
+}
+
+function toolCallStatusText(tool: Record<string, unknown>) {
+  if (tool.finished_ts) return tm("toolStatus.done");
+  return tm("toolStatus.running");
+}
+
+function parseJsonSafe(value: unknown) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+</script>
+
+<style scoped>
+.reasoning-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding-top: 4px;
+}
+
+.reasoning-timeline-item {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr);
+  column-gap: 10px;
+  align-items: flex-start;
+  padding-bottom: 10px;
+}
+
+.reasoning-timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.reasoning-timeline-rail {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+  padding-top: 6px;
+}
+
+.reasoning-timeline-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(var(--v-theme-on-surface), 0.18);
+}
+
+.reasoning-timeline-line {
+  position: absolute;
+  top: 15px;
+  bottom: -10px;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: rgba(var(--v-theme-on-surface), 0.12);
+}
+
+.reasoning-step {
+  min-width: 0;
+  font-size: 14.5px;
+  line-height: 1.62;
+}
+
+.reasoning-step-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+  color: rgba(var(--v-theme-on-surface), 0.54);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.reasoning-step-title {
+  color: rgba(var(--v-theme-on-surface), 0.76);
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.reasoning-tool-call-block {
+  margin-top: 4px;
+  font-style: normal;
+}
+
+.reasoning-text {
+  font-size: inherit;
+  line-height: inherit;
+  color: rgba(var(--v-theme-on-surface), 0.72);
+  font-style: normal;
+}
+
+.reasoning-step :deep(.tool-call-card),
+.reasoning-step :deep(.tool-call-item),
+.reasoning-step :deep(.ipython-tool-block) {
+  font-size: 13.5px;
+  line-height: 1.56;
+}
+
+.reasoning-step :deep(.tool-call-card .detail-label) {
+  font-size: 11.5px;
+}
+
+.reasoning-step :deep(.tool-call-card .detail-value),
+.reasoning-step :deep(.ipython-tool-block .code-highlighted),
+.reasoning-step :deep(.ipython-tool-block .code-fallback),
+.reasoning-step :deep(.ipython-tool-block .result-label),
+.reasoning-step :deep(.ipython-tool-block .result-content) {
+  font-size: 12.5px;
+}
+
+.tool-call-inline-status {
+  margin-left: 4px;
+  color: rgba(var(--v-theme-on-surface), 0.48);
+}
+</style>
--- a/dashboard/src/components/chat/message_list_comps/ToolCallItem.vue
+++ b/dashboard/src/components/chat/message_list_comps/ToolCallItem.vue
@@ -33,7 +33,8 @@ const toggleExpanded = () => {

 <style scoped>
 .tool-call-line {
-    font-size: 14px;
+    font: inherit;
+    line-height: inherit;
    color: var(--v-theme-secondaryText);
    opacity: 0.85;
    cursor: pointer;
@@ -55,6 +56,8 @@ const toggleExpanded = () => {
    border-left: 2px solid var(--v-theme-border);
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.02);
+    font-size: inherit;
+    line-height: inherit;
 }

 .tool-call-inline-details.is-dark {
--- a/dashboard/src/composables/useMessages.ts
+++ b/dashboard/src/composables/useMessages.ts
@@ -36,6 +36,11 @@ export interface ChatContent {
  refs?: any;
 }

+export interface MessageDisplayBlock {
+  kind: "thinking" | "content";
+  parts: MessagePart[];
+}
+
 export interface ChatRecord {
  id?: string | number;
  content: ChatContent;
@@ -790,38 +795,63 @@ export function extractReasoningText(
 }

 export function thinkingParts(content: ChatContent): MessagePart[] {
-  const parts = Array.isArray(content.message)
-    ? content.message
-    : normalizeMessageParts(content.message, content.reasoning || "");
-  const start = firstNonEmptyPartIndex(parts);
-  if (start < 0) return [];
-
-  let end = start;
-  while (end < parts.length && isThinkingPart(parts[end])) {
-    end += 1;
-  }
-
-  if (end > start) return parts.slice(start, end);
+  const firstThinkingBlock = messageBlocks(content).find(
+    (block) => block.kind === "thinking",
+  );
+  if (firstThinkingBlock) return firstThinkingBlock.parts;

  const fallbackReasoning = String(content.reasoning || "");
  return fallbackReasoning ? [{ type: "think", think: fallbackReasoning }] : [];
 }

 export function displayParts(content: ChatContent): MessagePart[] {
+  return messageBlocks(content)
+    .filter((block) => block.kind === "content")
+    .flatMap((block) => block.parts);
+}
+
+export function messageBlocks(content: ChatContent): MessageDisplayBlock[] {
  const parts = Array.isArray(content.message)
    ? content.message
    : normalizeMessageParts(content.message, content.reasoning || "");
-  const start = firstNonEmptyPartIndex(parts);
-  if (start < 0) return [];

-  let index = start;
-  while (index < parts.length && isThinkingPart(parts[index])) {
-    index += 1;
+  const blocks: MessageDisplayBlock[] = [];
+  let currentKind: MessageDisplayBlock["kind"] | null = null;
+  let currentParts: MessagePart[] = [];
+
+  for (const part of parts) {
+    if (isEmptyPlainPart(part)) continue;
+
+    const nextKind: MessageDisplayBlock["kind"] = isThinkingPart(part)
+      ? "thinking"
+      : "content";
+
+    if (currentKind !== nextKind) {
+      if (currentKind && currentParts.length) {
+        blocks.push({ kind: currentKind, parts: currentParts });
+      }
+      currentKind = nextKind;
+      currentParts = [{ ...part }];
+      continue;
+    }
+
+    currentParts.push({ ...part });
  }

-  return parts
-    .slice(index)
-    .filter((part) => !isEmptyPlainPart(part));
+  if (currentKind && currentParts.length) {
+    blocks.push({ kind: currentKind, parts: currentParts });
+  }
+
+  if (!blocks.length && content.reasoning) {
+    return [
+      {
+        kind: "thinking",
+        parts: [{ type: "think", think: String(content.reasoning) }],
+      },
+    ];
+  }
+
+  return blocks;
 }

 function partToPayload(part: MessagePart) {
--- a/dashboard/src/i18n/locales/en-US/features/chat.json
+++ b/dashboard/src/i18n/locales/en-US/features/chat.json
@@ -113,7 +113,9 @@
    "title": "Config"
  },
  "reasoning": {
-    "thinking": "Thinking Process"
+    "thinking": "Thinking Process",
+    "think": "Thinking",
+    "toolUsed": "Using Tool"
  },
  "reply": {
    "replyTo": "Reply to",
--- a/dashboard/src/i18n/locales/ru-RU/features/chat.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/chat.json
@@ -113,7 +113,9 @@
    "title": "Конфигурация"
  },
  "reasoning": {
-    "thinking": "Рассуждение"
+    "thinking": "Рассуждение",
+    "think": "Размышление",
+    "toolUsed": "Использование инструмента"
  },
  "reply": {
    "replyTo": "В ответ на",
--- a/dashboard/src/i18n/locales/zh-CN/features/chat.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/chat.json
@@ -113,7 +113,9 @@
    "title": "配置文件"
  },
  "reasoning": {
-    "thinking": "思考过程"
+    "thinking": "思考过程",
+    "think": "思考",
+    "toolUsed": "使用工具"
  },
  "reply": {
    "replyTo": "引用",