[fix] fold tool runs in history (#2697)

* fix: fold tool runs in history

* docs: record history folding PR

Author: EKKOLearnAI

docs/chat-chain-changes/2026-08-23-history-tool-run-folding.md

@@ -0,0 +1,6 @@
+---
+date: 2026-08-23
+pr: 2697
+feature: History tool run folding
+impact: History sessions now preserve persisted run markers and group completed tool traces into the same collapsible run cards used by single chat.
+---

packages/client/src/components/hermes/chat/HistoryMessageList.vue

@@ -9,11 +9,13 @@ import { ref, computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue"
 import { useI18n } from "vue-i18n";
 import VirtualMessageList from "./VirtualMessageList.vue";
 import MessageItem from "./MessageItem.vue";
+import ToolRunCard from "./ToolRunCard.vue";
 import { useChatStore } from "@/stores/hermes/chat";
 import { useToolTraceVisibility } from "@/composables/useToolTraceVisibility";
 import type { Session } from "@/stores/hermes/chat";
 import { messageScrollPositionKey, rememberMessageScrollPosition } from "./message-scroll-position";
 import { chatSessionAgentAvatar } from "@/utils/chat-agent-avatar";
+import { groupCompletedToolsByRun } from "./tool-run-grouping";
 
 const props = withDefaults(defineProps<{
   session?: Session | null; // Optional: use this session instead of chatStore.activeSession
@@ -37,13 +39,13 @@ const activeSessionScrollKey = computed(() =>
 const listInstanceKey = computed(() => activeSessionScrollKey.value || "history-empty");
 
 const displayMessages = computed(() =>
-  (activeSession.value?.messages || []).filter((m) => {
+  groupCompletedToolsByRun((activeSession.value?.messages || []).filter((m) => {
     // Tool messages without a name are internal use only and remain hidden.
     if (m.role === 'tool') return toolTraceVisible.value && !!m.toolName
     // Filter out messages with empty content.
     if (!m.content?.trim()) return false
     return true
-  }),
+  })),
 );
 
 function isNearBottom(threshold = 200): boolean {
@@ -209,7 +211,13 @@ defineExpose({
         </div>
       </template>
       <template #item="{ message: msg }">
+        <ToolRunCard
+          v-if="msg.systemType === 'tool-run' && msg.toolRunId && msg.toolMessages"
+          :run-id="msg.toolRunId"
+          :tools="msg.toolMessages"
+        />
         <MessageItem
+          v-else
           :message="msg"
           :assistant-agent="assistantAgent"
           :highlight="chatStore.focusMessageId === msg.id"

packages/client/src/components/hermes/chat/MessageList.vue

@@ -24,6 +24,7 @@ import { openSubagentStream, subagentIdFromToolCall } from "@/utils/hermes/subag
 import { messageScrollPositionKey, rememberMessageScrollPosition } from "./message-scroll-position";
 import { chatSessionAgentAvatar } from "@/utils/chat-agent-avatar";
 import { parseThinking } from "@/utils/thinking-parser";
+import { groupCompletedToolsByRun } from "./tool-run-grouping";
 
 const props = withDefaults(defineProps<{
   approvalPortalToBody?: boolean
@@ -195,48 +196,6 @@ function hasRenderableAssistantContent(message: Message): boolean {
   );
 }
 
-function groupCompletedToolsByRun(messages: Message[]): Message[] {
-  const toolsByRun = new Map<string, Message[]>();
-  for (const message of messages) {
-    const runId = message.runMarker?.trim();
-    if (message.role !== "tool" || message.toolStatus === "running" || !runId) continue;
-    const tools = toolsByRun.get(runId) || [];
-    tools.push(message);
-    toolsByRun.set(runId, tools);
-  }
-  if (toolsByRun.size === 0) return messages;
-
-  const emittedRuns = new Set<string>();
-  const grouped: Message[] = [];
-  for (const message of messages) {
-    const runId = message.role === "tool" && message.toolStatus !== "running"
-      ? message.runMarker?.trim()
-      : undefined;
-    if (!runId) {
-      grouped.push(message);
-      continue;
-    }
-    if (emittedRuns.has(runId)) continue;
-    emittedRuns.add(runId);
-    const tools = toolsByRun.get(runId);
-    if (!tools?.length) {
-      grouped.push(message);
-      continue;
-    }
-    grouped.push({
-      id: `tool-run:${runId}`,
-      role: "system",
-      content: "",
-      timestamp: tools[0].timestamp,
-      systemType: "tool-run",
-      runMarker: runId,
-      toolRunId: runId,
-      toolMessages: tools,
-    });
-  }
-  return grouped;
-}
-
 const displayMessages = computed(() => {
   const messages = chatStore.messages;
   const currentToolIds = new Set(currentToolCalls.value.map((tool) => tool.id));

packages/client/src/components/hermes/chat/tool-run-grouping.ts

@@ -0,0 +1,43 @@
+import type { Message } from '@/stores/hermes/chat'
+
+export function groupCompletedToolsByRun(messages: Message[]): Message[] {
+  const toolsByRun = new Map<string, Message[]>()
+  for (const message of messages) {
+    const runId = message.runMarker?.trim()
+    if (message.role !== 'tool' || message.toolStatus === 'running' || !runId) continue
+    const tools = toolsByRun.get(runId) || []
+    tools.push(message)
+    toolsByRun.set(runId, tools)
+  }
+  if (toolsByRun.size === 0) return messages
+
+  const emittedRuns = new Set<string>()
+  const grouped: Message[] = []
+  for (const message of messages) {
+    const runId = message.role === 'tool' && message.toolStatus !== 'running'
+      ? message.runMarker?.trim()
+      : undefined
+    if (!runId) {
+      grouped.push(message)
+      continue
+    }
+    if (emittedRuns.has(runId)) continue
+    emittedRuns.add(runId)
+    const tools = toolsByRun.get(runId)
+    if (!tools?.length) {
+      grouped.push(message)
+      continue
+    }
+    grouped.push({
+      id: `tool-run:${runId}`,
+      role: 'system',
+      content: '',
+      timestamp: tools[0].timestamp,
+      systemType: 'tool-run',
+      runMarker: runId,
+      toolRunId: runId,
+      toolMessages: tools,
+    })
+  }
+  return grouped
+}

packages/client/src/views/hermes/HistoryView.vue

@@ -177,6 +177,7 @@ function mapHistoryMessages(messages: HermesMessage[]): Session['messages'] {
       timestamp: m.timestamp * 1000,
       reasoning: m.reasoning || undefined,
       systemType: displayRole === 'command' ? 'command' : undefined,
+      runMarker: m.run_marker,
     }
 
     if (m.role === 'tool' || isHistoryMoaToolDisplay(m)) {

tests/client/tool-trace-visibility.test.ts

@@ -2,7 +2,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { defineComponent } from 'vue'
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
@@ -19,13 +18,18 @@ import HistoryMessageList from '@/components/hermes/chat/HistoryMessageList.vue'
 import { useChatStore, type Message, type Session } from '@/stores/hermes/chat'
 import { useToolTraceVisibility } from '@/composables/useToolTraceVisibility'
 
-const MessageItemStub = defineComponent({
-  name: 'MessageItem',
-  props: {
-    message: { type: Object, required: true },
-    highlight: { type: Boolean, default: false },
-  },
-  template: '<div class="stub-message" :data-role="message.role" :data-id="message.id">{{ message.toolName || message.content }}</div>',
+vi.mock('@/components/hermes/chat/MessageItem.vue', async () => {
+  const { defineComponent } = await import('vue')
+  return {
+    default: defineComponent({
+      name: 'MessageItem',
+      props: {
+        message: { type: Object, required: true },
+        highlight: { type: Boolean, default: false },
+      },
+      template: '<div class="stub-message" :data-role="message.role" :data-id="message.id">{{ message.toolName || message.content }}</div>',
+    }),
+  }
 })
 
 function makeSession(messages: Message[]): Session {
@@ -61,14 +65,7 @@ describe('tool trace visibility', () => {
     ])
     chatStore.abortState = { aborting: true, synced: false }
 
-    return mount(MessageList, {
-      global: {
-        stubs: {
-          MessageItem: MessageItemStub,
-          Transition: false,
-        },
-      },
-    })
+    return mount(MessageList)
   }
 
   it('shows named transcript and live tool traces by default while keeping unnamed internal tools hidden', () => {
@@ -85,9 +82,6 @@ describe('tool trace visibility', () => {
   it('applies the same default-visible rule to history sessions', () => {
     const wrapper = mount(HistoryMessageList, {
       props: { session: makeSession(sampleMessages) },
-      global: {
-        stubs: { MessageItem: MessageItemStub },
-      },
     })
 
     expect(wrapper.findAll('.stub-message').map(node => node.attributes('data-id'))).toEqual([
@@ -97,15 +91,43 @@ describe('tool trace visibility', () => {
     ])
   })
 
+  it('groups and folds completed history tools from the same run', async () => {
+    const wrapper = mount(HistoryMessageList, {
+      props: {
+        session: makeSession([
+          { id: 'user-1', role: 'user', content: 'inspect repo', timestamp: 1 },
+          { id: 'tool-1', role: 'tool', content: '', timestamp: 2, toolName: 'read_file', toolResult: 'one', toolStatus: 'done', runMarker: 'history-run' },
+          { id: 'tool-2', role: 'tool', content: '', timestamp: 3, toolName: 'search', toolResult: 'two', toolStatus: 'done', runMarker: 'history-run' },
+          { id: 'assistant-1', role: 'assistant', content: 'done', timestamp: 4 },
+        ]),
+      },
+    })
+
+    const card = wrapper.get('.tool-run-card')
+    const toggle = card.get('.tool-run-header')
+    expect(toggle.attributes('aria-expanded')).toBe('false')
+    expect(wrapper.find('[data-id="tool-1"]').exists()).toBe(false)
+    expect(wrapper.find('[data-id="tool-2"]').exists()).toBe(false)
+
+    await toggle.trigger('click')
+    expect(toggle.attributes('aria-expanded')).toBe('true')
+    expect(wrapper.find('[data-id="tool-1"]').exists()).toBe(true)
+    expect(wrapper.find('[data-id="tool-2"]').exists()).toBe(true)
+
+    await toggle.trigger('click')
+    expect(toggle.attributes('aria-expanded')).toBe('false')
+    await vi.waitFor(() => {
+      expect(wrapper.find('[data-id="tool-1"]').exists()).toBe(false)
+      expect(wrapper.find('[data-id="tool-2"]').exists()).toBe(false)
+    })
+  })
+
   it('does not fall back to the live chat session while history session data is loading', () => {
     const chatStore = useChatStore()
     chatStore.activeSessionId = 'session-1'
     chatStore.activeSession = makeSession(sampleMessages)
 
     const wrapper = mount(HistoryMessageList, {
-      global: {
-        stubs: { MessageItem: MessageItemStub },
-      },
     })
 
     expect(wrapper.findAll('.stub-message')).toHaveLength(0)
@@ -123,9 +145,6 @@ describe('tool trace visibility', () => {
 
     const historyWrapper = mount(HistoryMessageList, {
       props: { session: makeSession(sampleMessages) },
-      global: {
-        stubs: { MessageItem: MessageItemStub },
-      },
     })
     expect(historyWrapper.findAll('.stub-message').map(node => node.attributes('data-id'))).toEqual([
       'user-1',
@@ -143,14 +162,7 @@ describe('tool trace visibility', () => {
     ])
     chatStore.abortState = { aborting: true, synced: false }
 
-    const wrapper = mount(MessageList, {
-      global: {
-        stubs: {
-          MessageItem: MessageItemStub,
-          Transition: false,
-        },
-      },
-    })
+    const wrapper = mount(MessageList)
 
     expect(wrapper.findAll('.stub-message').map(node => node.attributes('data-id'))).toContain('tool-weather')
     expect(wrapper.findAll('.tool-call-name').map(node => node.text())).not.toContain('weather')