From e841e256737ecf8a44fd038a9601f601c17ff7e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Thu, 3 Sep 2026 04:00:33 -0700
Subject: [PATCH 1/3] =?UTF-8?q?feat(web):=20=E8=81=8A=E5=A4=A9=E8=BF=87?=
 =?UTF-8?q?=E7=A8=8B=E7=BB=84=E5=A4=B4=E6=94=B9=E4=B8=BA=E4=B8=A4=E5=B1=82?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E6=A0=87=E9=A2=98=20+=20composer=20?=
 =?UTF-8?q?=E5=B8=B8=E9=A9=BB=E8=BF=90=E8=A1=8C=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

组头(运行中)从「只滚动最新一次调用」改为两层:上层=段级现在时动词
(Exploring/探索中,shimmer)+ 实时 bucket 计数,下层=now 行滚动当前调用
(复用 live-peek-line;展开组体时隐藏,避免一个状态两处渲染)。沉淀后组头
恢复最终聚合并追加段级 diff 汇总(+N/-N)。

composer dock 新增 runtime line:streaming 且未阻塞于审批/ask_user 时显示
工作中 + 已耗时 + 步数;跟随 composer 不随消息流滚走,回答「还活着吗」。
token 用量流里还没有,耗时+步数是诚实的客户端代理信号。

i18n 三语同改:新增 chat.process.phase.* 与 chat.runtime.working。
---
 apps/web/src/i18n/locales/en.json             |  14 ++
 apps/web/src/i18n/locales/ja.json             |  16 ++-
 apps/web/src/i18n/locales/zh.json             |  14 ++
 .../src/pages/home/components/chat-pane.vue   |  35 +++++
 .../pages/home/components/composer-dock.vue   |  27 ++++
 .../home/components/composer-runtime-line.vue |  89 ++++++++++++
 .../home/components/tool-call-group.test.ts   | 131 ++++++++++++++++--
 .../pages/home/components/tool-call-group.vue | 116 ++++++++++++++--
 8 files changed, 415 insertions(+), 27 deletions(-)
 create mode 100644 apps/web/src/pages/home/components/composer-runtime-line.vue

diff --git a/apps/web/src/i18n/locales/en.json b/apps/web/src/i18n/locales/en.json
index 2d9554e09..d2e7fdb5e 100644
--- a/apps/web/src/i18n/locales/en.json
+++ b/apps/web/src/i18n/locales/en.json
@@ -666,6 +666,17 @@
       "thought": "Thought",
       "thoughtBriefly": "Thought for a couple of seconds",
       "thoughtSeconds": "Thought for {seconds}s",
+      "phase": {
+        "browse": "Exploring",
+        "edit": "Editing",
+        "run": "Running",
+        "message": "Messaging",
+        "schedule": "Scheduling",
+        "media": "Generating",
+        "agent": "Delegating",
+        "gui": "Browsing",
+        "other": "Working"
+      },
       "thinkingHints": [
         "Connecting the dots",
         "Piecing it together",
@@ -677,6 +688,9 @@
         "Taking a closer look"
       ]
     },
+    "runtime": {
+      "working": "Working"
+    },
     "currentBot": "Current Bot",
     "inputPlaceholder": "Ask anything…",
     "readonlyHint": "This chat is read-only",
diff --git a/apps/web/src/i18n/locales/ja.json b/apps/web/src/i18n/locales/ja.json
index f6b437260..4e5209cff 100644
--- a/apps/web/src/i18n/locales/ja.json
+++ b/apps/web/src/i18n/locales/ja.json
@@ -649,7 +649,21 @@
       "steps": "{count} ステップ",
       "thought": "考え",
       "thoughtBriefly": "少し考えた",
-      "thoughtSeconds": "{seconds}秒考えました"
+      "thoughtSeconds": "{seconds}秒考えました",
+      "phase": {
+        "browse": "探索中",
+        "edit": "編集中",
+        "run": "実行中",
+        "message": "送信中",
+        "schedule": "変更中",
+        "media": "生成中",
+        "agent": "委譲中",
+        "gui": "閲覧中",
+        "other": "作業中"
+      }
+    },
+    "runtime": {
+      "working": "作業中"
     },
     "currentBot": "現在のBot",
     "inputPlaceholder": "質問を入力してください…",
diff --git a/apps/web/src/i18n/locales/zh.json b/apps/web/src/i18n/locales/zh.json
index 73c2fca8e..735408013 100644
--- a/apps/web/src/i18n/locales/zh.json
+++ b/apps/web/src/i18n/locales/zh.json
@@ -666,6 +666,17 @@
       "thought": "已思考",
       "thoughtBriefly": "思考了几秒",
       "thoughtSeconds": "已思考 {seconds} 秒",
+      "phase": {
+        "browse": "探索中",
+        "edit": "修改中",
+        "run": "运行中",
+        "message": "发送中",
+        "schedule": "调整中",
+        "media": "生成中",
+        "agent": "委派中",
+        "gui": "浏览中",
+        "other": "处理中"
+      },
       "thinkingHints": [
         "正在连接线索",
         "正在拼合信息",
@@ -677,6 +688,9 @@
         "正在仔细查看"
       ]
     },
+    "runtime": {
+      "working": "工作中"
+    },
     "currentBot": "当前 Bot",
     "inputPlaceholder": "问点什么…",
     "readonlyHint": "该聊天为只读",
diff --git a/apps/web/src/pages/home/components/chat-pane.vue b/apps/web/src/pages/home/components/chat-pane.vue
index 0de2f20f2..d56104958 100644
--- a/apps/web/src/pages/home/components/chat-pane.vue
+++ b/apps/web/src/pages/home/components/chat-pane.vue
@@ -379,6 +379,9 @@
               :command-panel="composerCommandPanel"
               :error-message="composerError"
               :pending-user-input="pendingUserInput"
+              :runtime-active="runtimeLineActive"
+              :runtime-started-at="runtimeLineStartedAt"
+              :runtime-steps="runtimeLineSteps"
               @select-command-item="selectCommandResultItem"
               @dismiss-command="clearCurrentCommandEvent"
               @reveal-composer="handleDockRevealComposer"
@@ -1142,6 +1145,38 @@ const { items: pendingApprovals } = usePendingApprovals(messages)
 
 const hasPendingToolApproval = computed(() => pendingApprovals.value.length > 0)
 
+// Inputs for the dock's runtime line. The line claims "the agent is working",
+// so its active gate is stricter than `streaming` alone: a turn blocked on an
+// approval or an ask_user answer is waiting on the USER, and the panel for
+// that decision is already telling it — the line would argue with it.
+const runtimeLineActive = computed(() =>
+  streaming.value && !pendingUserInput.value && !hasPendingToolApproval.value)
+
+// The streaming assistant turn, when one is visible in this pane. Its
+// timestamp is the turn's real start (survives pane remounts mid-stream);
+// its tool-block count is the line's growing "steps" signal.
+const streamingTurn = computed(() => {
+  if (!streaming.value) return null
+  for (let i = messages.value.length - 1; i >= 0; i -= 1) {
+    const message = messages.value[i]!
+    if (message.role === 'assistant' && message.streaming) return message
+  }
+  return null
+})
+
+const runtimeLineStartedAt = computed(() => {
+  const timestamp = streamingTurn.value?.timestamp
+  if (!timestamp) return null
+  const ms = Date.parse(timestamp)
+  return Number.isFinite(ms) ? ms : null
+})
+
+const runtimeLineSteps = computed(() => {
+  const turn = streamingTurn.value
+  if (!turn || turn.role !== 'assistant') return 0
+  return turn.messages.filter(block => block.type === 'tool').length
+})
+
 const canForkAssistant = computed(() =>
   !streaming.value
   && !loadingMessages.value
diff --git a/apps/web/src/pages/home/components/composer-dock.vue b/apps/web/src/pages/home/components/composer-dock.vue
index 6dca61038..a80d0ec9b 100644
--- a/apps/web/src/pages/home/components/composer-dock.vue
+++ b/apps/web/src/pages/home/components/composer-dock.vue
@@ -26,6 +26,26 @@
       :user-input="pendingUserInput"
       @reveal-composer="handleUserInputReveal"
     />
+    <!-- The runtime line hugs the box the way the panel does, but it is a
+         STATUS member, not a stack member: nothing to click, nothing to
+         answer. The pane gates `runtimeActive` (streaming AND not blocked on
+         the user) so the line never argues with an approval/ask_user panel
+         about what the turn is waiting on. -->
+    <Transition
+      enter-active-class="transition-opacity duration-150 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-100 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <ComposerRuntimeLine
+        v-if="runtimeActive"
+        :active="runtimeActive"
+        :started-at="runtimeStartedAt"
+        :steps="runtimeSteps"
+      />
+    </Transition>
     <div
       v-show="composerVisible"
       ref="boxEl"
@@ -66,6 +86,7 @@
 import { computed, ref, watch } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import ComposerPanel from './composer-panel.vue'
+import ComposerRuntimeLine from './composer-runtime-line.vue'
 import ChatUserInputForm from './chat-user-input-form.vue'
 import { COMPOSER_MASK_BELOW_PX } from '../composables/useComposerLayout'
 import type { PendingApprovalItem } from '../composables/usePendingApprovals'
@@ -85,6 +106,12 @@ const props = defineProps<{
   commandPanel: CommandPanelData | null
   errorMessage: string
   pendingUserInput: UIUserInput | null
+  // Runtime-line inputs, owned by the pane (it alone knows the streaming turn
+  // and what the turn is blocked on). All three are inert unless
+  // runtimeActive is on.
+  runtimeActive?: boolean
+  runtimeStartedAt?: number | null
+  runtimeSteps?: number
 }>()
 
 const emit = defineEmits<{
diff --git a/apps/web/src/pages/home/components/composer-runtime-line.vue b/apps/web/src/pages/home/components/composer-runtime-line.vue
new file mode 100644
index 000000000..8f3562018
--- /dev/null
+++ b/apps/web/src/pages/home/components/composer-runtime-line.vue
@@ -0,0 +1,89 @@
+<template>
+  <!--
+    Runtime line — the turn-level "alive" signal that rides with the composer
+    instead of scrolling away with the transcript. Process-group headers
+    answer "what is it doing" inside the message flow; this line stays put and
+    answers "is it still working" with signals that MOVE rather than a fake
+    percentage: the clock ticks and the step count grows. While the turn is
+    blocked on the user (approval / ask_user) the caller hides it — the panel
+    above is the one telling that story, and two status surfaces disagreeing
+    is worse than one. Token throughput would be the stronger "model is alive"
+    signal, but the stream does not carry usage yet; elapsed + steps are the
+    honest client-side proxies until it does.
+  -->
+  <div
+    class="flex items-center gap-1.5 px-1.5 pb-1.5 text-xs text-muted-foreground select-none"
+    role="status"
+  >
+    <span class="tool-shimmer-text">{{ t('chat.runtime.working') }}</span>
+    <template v-if="elapsedLabel">
+      <span aria-hidden="true">·</span>
+      <span class="font-mono">{{ elapsedLabel }}</span>
+    </template>
+    <template v-if="steps > 0">
+      <span aria-hidden="true">·</span>
+      <span>{{ t('chat.process.steps', { count: steps }) }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(defineProps<{
+  active: boolean
+  // Turn start in epoch ms when known (the streaming turn's timestamp); null
+  // when the turn's start is not observable (e.g. an unbound composer stream),
+  // in which case the line stamps its own start when `active` flips on.
+  startedAt?: number | null
+  // Tool calls the turn has run so far.
+  steps?: number
+}>(), {
+  startedAt: null,
+  steps: 0,
+})
+
+const { t } = useI18n()
+
+const now = ref(Date.now())
+let selfStart = 0
+let timer: ReturnType<typeof setInterval> | null = null
+
+function clearTimer() {
+  if (timer !== null) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+watch(
+  () => props.active,
+  (active) => {
+    clearTimer()
+    if (!active) return
+    selfStart = Date.now()
+    now.value = Date.now()
+    // One tick per second is the calmest cadence that still proves "alive";
+    // only this line re-renders (the ref is local), not the dock around it.
+    timer = setInterval(() => { now.value = Date.now() }, 1000)
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(clearTimer)
+
+// Symbol units (s/m/h) are locale-neutral runtime chrome, deliberately not
+// i18n'd — they name units, not sentences.
+const elapsedLabel = computed(() => {
+  if (!props.active) return ''
+  const start = props.startedAt ?? selfStart
+  if (!start) return ''
+  const seconds = Math.max(0, Math.floor((now.value - start) / 1000))
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ${String(seconds % 60).padStart(2, '0')}s`
+  const hours = Math.floor(minutes / 60)
+  return `${hours}h ${String(minutes % 60).padStart(2, '0')}m`
+})
+</script>
diff --git a/apps/web/src/pages/home/components/tool-call-group.test.ts b/apps/web/src/pages/home/components/tool-call-group.test.ts
index 27ae39afd..f4e2a3990 100644
--- a/apps/web/src/pages/home/components/tool-call-group.test.ts
+++ b/apps/web/src/pages/home/components/tool-call-group.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { createApp, defineComponent, h } from 'vue'
+import { createApp, defineComponent, h, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import type { ContentBlock, ThinkingBlock as ThinkingBlockType, ToolCallBlock as ToolCallBlockType } from '@/store/chat-list'
@@ -14,10 +14,19 @@ vi.mock('@/i18n', () => ({
 }))
 import ToolCallGroup from './tool-call-group.vue'
 
-// Pins the ghost-"Thinking…" fix: the collapsed header is a live ticker only
-// while the turn streams (`active`). A background task that outlives the turn
-// must not pin the ticker — its `running` block used to keep the header saying
-// "Thinking…" indefinitely on a finished turn (issue #1106).
+// Two contracts pinned here:
+//
+// 1. Ghost-"Thinking…" fix (issue #1106): the collapsed header is a live
+//    two-layer summary only while the turn streams (`active`). A background
+//    task that outlives the turn must not pin the live header — its `running`
+//    block used to keep the header saying "Thinking…" indefinitely on a
+//    finished turn.
+//
+// 2. The two-layer adaptive header: while a segment streams, the header names
+//    the phase + live tally and a "now" line below rolls the current call;
+//    once the segment settles, the header shows the final tally plus the diff
+//    totals. This guards against regressing to a bare ticker of the latest
+//    call (which hid the aggregate view until the segment settled).
 
 interface MountedGroup {
   app: ReturnType<typeof createApp>
@@ -33,6 +42,7 @@ afterEach(() => {
   }
 })
 
+let nextBlockId = 0
 let nextMessageId = 0
 
 function mountGroup(items: ContentBlock[], active: boolean | undefined): HTMLDivElement {
@@ -50,8 +60,25 @@ function mountGroup(items: ContentBlock[], active: boolean | undefined): HTMLDiv
       en: {
         chat: {
           thinkingInProgress: 'Thinking',
-          process: { thought: 'Thought', steps: '{count} steps', run: 'Ran {count} commands' },
-          tools: { run: 'Run' },
+          process: {
+            thought: 'Thought',
+            steps: '{count} steps',
+            browse: 'Read {count} files',
+            edit: 'Edited {count} files',
+            run: 'Ran {count} commands',
+            phase: {
+              browse: 'Exploring',
+              edit: 'Editing',
+              run: 'Running',
+              message: 'Messaging',
+              schedule: 'Scheduling',
+              media: 'Generating',
+              agent: 'Delegating',
+              gui: 'Browsing',
+              other: 'Working',
+            },
+          },
+          tools: { run: 'Run', read: 'Read', exec: 'Run', edit: 'Edit' },
         },
       },
     },
@@ -70,6 +97,10 @@ function headerText(root: HTMLElement): string {
   return header?.textContent ?? ''
 }
 
+function nowLine(root: HTMLElement): HTMLElement | null {
+  return root.querySelector('.live-peek-line')
+}
+
 function bgExecTool(id: number, running: boolean): ToolCallBlockType {
   return {
     id,
@@ -83,25 +114,103 @@ function bgExecTool(id: number, running: boolean): ToolCallBlockType {
   } as unknown as ToolCallBlockType
 }
 
+function toolBlock(toolName: string, input: unknown, running = false): ToolCallBlockType {
+  const id = ++nextBlockId
+  return {
+    id,
+    type: 'tool',
+    name: toolName,
+    toolName,
+    input,
+    running,
+    done: !running,
+    tool_call_id: `tc-${id}`,
+    toolCallId: `tc-${id}`,
+    result: null,
+  }
+}
+
 function reasoning(id: number): ThinkingBlockType {
   return { id, type: 'reasoning', content: 'planning the tunnel' } as ThinkingBlockType
 }
 
-describe('ToolCallGroup header ticker', () => {
-  it('shows the ticker label while the turn is streaming', () => {
+describe('ToolCallGroup live header gating (#1106)', () => {
+  it('keeps the live two-layer header while the turn is streaming', () => {
     const root = mountGroup([bgExecTool(1, true), reasoning(2)], true)
-    expect(headerText(root)).toBe('Thinking')
+    // Header = the segment's phase (a command run), now line = the model's
+    // current step — the layering the old ticker-only header couldn't express.
+    expect(headerText(root)).toBe('Running')
+    expect(nowLine(root)?.textContent).toContain('Thinking')
   })
 
-  it('drops the ticker when the turn finished even if a background tool is still running', () => {
+  it('drops the live header when the turn finished even if a background tool is still running', () => {
     const root = mountGroup([bgExecTool(1, true), reasoning(2)], false)
     // Aggregate summary, not "Thinking" — the model is done; only the spawned
     // command is alive, and its own row reports that.
     expect(headerText(root)).not.toBe('Thinking')
+    expect(nowLine(root)).toBeNull()
   })
 
   it('shows the aggregate summary once the turn finished and tools settled', () => {
     const root = mountGroup([bgExecTool(1, false), reasoning(2)], false)
     expect(headerText(root)).not.toBe('Thinking')
+    expect(nowLine(root)).toBeNull()
+  })
+})
+
+describe('ToolCallGroup adaptive header layers', () => {
+  it('names the phase and live tally in the header while streaming, and rolls the current call below', () => {
+    const root = mountGroup([
+      toolBlock('read', { path: 'src/auth/session.ts' }),
+      toolBlock('read', { path: 'src/auth/cookie.ts' }),
+      toolBlock('exec', { command: 'pnpm test' }, true),
+    ], true)
+
+    expect(headerText(root)).toContain('Exploring')
+    expect(headerText(root)).toContain('Read 2 files')
+    expect(headerText(root)).toContain('Ran 1 command')
+    expect(nowLine(root)?.textContent).toContain('pnpm test')
+  })
+
+  it('settles to the final tally with diff totals and no now line', () => {
+    const root = mountGroup([
+      toolBlock('edit', { path: 'a.ts', old_text: 'l1\nl2\nl3', new_text: 'n1\nn2\nn3\nn4\nn5' }),
+      toolBlock('edit', { path: 'b.ts', old_text: 'l1\nl2', new_text: 'n1\nn2\nn3\nn4' }),
+    ], false)
+
+    const header = headerText(root)
+    expect(header).toContain('Edited 2 files')
+    expect(header).not.toContain('Editing')
+    expect(nowLine(root)).toBeNull()
+    // Diff totals are separate mono spans next to the label, not part of the
+    // label text — assert them on the header row as a whole.
+    const row = root.querySelector('button')
+    expect(row?.textContent).toContain('+9')
+    expect(row?.textContent).toContain('-5')
+  })
+
+  it('keeps diff totals hidden while the segment is still streaming', () => {
+    const root = mountGroup([
+      toolBlock('edit', { path: 'a.ts', old_text: 'l1', new_text: 'n1\nn2' }),
+      toolBlock('edit', { path: 'b.ts', old_text: 'l1', new_text: 'n1\nn2' }),
+    ], true)
+
+    const row = root.querySelector('button')
+    expect(headerText(root)).toContain('Editing')
+    expect(row?.textContent).not.toContain('+4')
+  })
+
+  it('hides the now line once the user opens the body', async () => {
+    const root = mountGroup([
+      toolBlock('read', { path: 'a.ts' }),
+      toolBlock('read', { path: 'b.ts' }),
+      toolBlock('exec', { command: 'ls' }, true),
+    ], true)
+    expect(nowLine(root)).not.toBeNull()
+
+    root.querySelector('button')?.click()
+    await nextTick()
+
+    expect(nowLine(root)).toBeNull()
   })
 })
diff --git a/apps/web/src/pages/home/components/tool-call-group.vue b/apps/web/src/pages/home/components/tool-call-group.vue
index ee0e6b89a..86ee43a05 100644
--- a/apps/web/src/pages/home/components/tool-call-group.vue
+++ b/apps/web/src/pages/home/components/tool-call-group.vue
@@ -38,12 +38,34 @@
         class="min-w-0 truncate tracking-[0.01em]"
         :class="anyToolRunning || active ? 'tool-shimmer-text' : ''"
       >{{ headerLabel }}</span>
+      <!-- Segment-level diff totals, revealed only once the segment settles.
+           Mid-stream the per-row diffs inside the capsule already carry that
+           signal and a second growing total here would double-render it. -->
+      <span
+        v-if="!active && diffTotals.add"
+        class="font-mono shrink-0 text-success-foreground"
+      >+{{ diffTotals.add }}</span>
+      <span
+        v-if="!active && diffTotals.remove"
+        class="font-mono shrink-0 text-destructive"
+      >-{{ diffTotals.remove }}</span>
       <ExpandChevron
         :open="open"
         class="ml-0.5"
       />
     </HeaderRow>
 
+    <!-- Second layer of the running header: the header names the phase and the
+         live tally ("Exploring · Read 3 files"), this line rolls the one call
+         happening right now ("Read session-adapter.ts"). Only while collapsed —
+         an open capsule's own last row already carries that signal, so the line
+         steps aside instead of double-rendering it. -->
+    <LivePeekLine
+      v-if="active && !open"
+      class="mt-0.5"
+      :text="tickerLabel"
+    />
+
     <CollapseSection :open="open">
       <!-- Card body sets the in-card type scale (one notch below the root-level
            cop rows) + tighter leading so nested steps read as a distinct, denser
@@ -84,10 +106,11 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { ContentBlock, ThinkingBlock as ThinkingBlockType, ToolCallBlock as ToolCallBlockType } from '@/store/chat-list'
-import { SUMMARY_BUCKET_ORDER, getToolDisplay, isGuiTool, toolBucket } from './tool-call-registry'
+import { SUMMARY_BUCKET_ORDER, getToolDisplay, isGuiTool, toolBucket, type ToolBucket } from './tool-call-registry'
 import ToolCallInline from './tool-call-inline.vue'
 import ThinkingBlock from './thinking-block.vue'
 import CollapseSection from './collapse-section.vue'
+import LivePeekLine from './live-peek-line.vue'
 import { getCollapseOpen, groupCollapseKey, setCollapseOpen } from './process-collapse'
 import HeaderRow from './tool-detail/header-row.vue'
 import ExpandChevron from './tool-detail/expand-chevron.vue'
@@ -187,6 +210,23 @@ function navigateHost(tool: ToolCallBlockType): string {
   }
 }
 
+// Bucket tally shared by both header states ("Read 3 files · Ran 2 commands").
+// It recomputes as blocks land, so while streaming this is the "it grows" half
+// of the header — the aggregate view the old ticker-only header only revealed
+// after the segment settled.
+const tallyLabel = computed(() => {
+  const tools = toolItems.value
+  const acc = new Map<string, number>()
+  for (const tool of tools) {
+    const b = toolBucket(tool.toolName)
+    if (b !== 'other') acc.set(b, (acc.get(b) ?? 0) + 1)
+  }
+  const segments = SUMMARY_BUCKET_ORDER
+    .filter(b => acc.has(b))
+    .map(b => t(`chat.process.${b}`, { count: acc.get(b)! }))
+  return segments.length ? segments.join(' · ') : t('chat.process.steps', { count: tools.length })
+})
+
 const aggregateLabel = computed(() => {
   const tools = toolItems.value
   if (tools.length === 0) return t('chat.process.thought')
@@ -199,18 +239,64 @@ const aggregateLabel = computed(() => {
     if (hosts.length > 1) return t('chat.process.browsedSites', { count: hosts.length })
     return t('chat.process.steps', { count: tools.length })
   }
-  const acc = new Map<string, number>()
+  return tallyLabel.value
+})
+
+// Phase of the segment, by its dominant bucket — the streaming header's first
+// layer. It names WHAT KIND of work is running ("Exploring") while the tally
+// says how much has been done; the shimmer on it is the alive signal. A GUI
+// run is always "Browsing" regardless of mix (its observe+action steps are one
+// browsing activity). Ties break by SUMMARY_BUCKET_ORDER; 'other' never wins
+// a tie because a generic "Working" adds nothing over the tally alone.
+const phaseKey = computed<ToolBucket | 'gui' | null>(() => {
+  const tools = toolItems.value
+  if (tools.length === 0) return null
+  if (tools.some(tool => isGuiTool(tool.toolName))) return 'gui'
+  const counts = new Map<ToolBucket, number>()
   for (const tool of tools) {
-    const b = toolBucket(tool.toolName)
-    if (b !== 'other') acc.set(b, (acc.get(b) ?? 0) + 1)
+    const bucket = toolBucket(tool.toolName)
+    counts.set(bucket, (counts.get(bucket) ?? 0) + 1)
   }
-  const segments = SUMMARY_BUCKET_ORDER
-    .filter(b => acc.has(b))
-    .map(b => t(`chat.process.${b}`, { count: acc.get(b)! }))
-  return segments.length ? segments.join(' · ') : t('chat.process.steps', { count: tools.length })
+  let best: ToolBucket = 'other'
+  let bestCount = 0
+  for (const bucket of SUMMARY_BUCKET_ORDER) {
+    const count = counts.get(bucket) ?? 0
+    if (count > bestCount) {
+      best = bucket
+      bestCount = count
+    }
+  }
+  if ((counts.get('other') ?? 0) > bestCount) return 'other'
+  return best
+})
+
+// Streaming header: phase verb + live tally. A lone tool keeps its specific
+// label off the header (the now line below already rolls it), so the verb
+// stands alone; a thought-only segment reads as "Thinking…".
+const runningHeadline = computed(() => {
+  const tools = toolItems.value
+  if (tools.length === 0) return t('chat.thinkingInProgress')
+  const key = phaseKey.value
+  if (!key) return t('chat.thinkingInProgress')
+  const verb = t(`chat.process.phase.${key}`)
+  if (tools.length === 1 || key === 'gui') return verb
+  return `${verb} · ${tallyLabel.value}`
+})
+
+// Segment-level diff totals for the settled header (+284 −96), summed from
+// each row's own display math so the header can never disagree with the body.
+const diffTotals = computed(() => {
+  let add = 0
+  let remove = 0
+  for (const tool of toolItems.value) {
+    const display = getToolDisplay(tool)
+    add += display.diffAdd ?? 0
+    remove += display.diffRemove ?? 0
+  }
+  return { add, remove }
 })
 
-// Streaming header acts as a ticker for the current (last) item.
+// Streaming now line rolls the current (last) item.
 const tickerLabel = computed(() => {
   const current = props.items[props.items.length - 1]
   if (!current) return ''
@@ -219,10 +305,10 @@ const tickerLabel = computed(() => {
   return aggregateLabel.value
 })
 
-// The header is a live ticker ONLY while the turn itself is streaming (`active`).
-// A still-running background task inside a finished turn must not keep the
-// ticker alive: "Thinking…" is a claim about the model, and a background
-// command the model started before finishing says nothing about the model.
-// The background tool's own row already shows its running state.
-const headerLabel = computed(() => (props.active ? tickerLabel.value : aggregateLabel.value))
+// The header is a two-layer live summary ONLY while the turn itself is
+// streaming (`active`). A still-running background task inside a finished turn
+// must not keep the ticker alive: "Thinking…" is a claim about the model, and
+// a background command the model started before finishing says nothing about
+// the model. The background tool's own row already shows its running state.
+const headerLabel = computed(() => (props.active ? runningHeadline.value : aggregateLabel.value))
 </script>

From 9536cbd0ae0fe59581a9e1375faa74fbc801bec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Thu, 3 Sep 2026 10:11:35 -0700
Subject: [PATCH 2/3] =?UTF-8?q?fix(web):=20=E7=BB=84=E5=A4=B4=E4=B8=A4?=
 =?UTF-8?q?=E5=B1=82=E5=8C=96=E5=AF=B9=E9=BD=90=E6=BC=94=E7=A4=BA=E7=A8=BF?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1,=E6=92=A4=E6=8E=89=E8=87=AA=E9=80=A0?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

第一轮实现没有照着第 17 页 demo 做,是自我想象的改写,已纠正:

- 撤掉 composer runtime 条(自创元素,demo 里没有;且英文有 1 steps 单复数
  bug)。composer-dock / chat-pane 恢复原状。
- 组头改两色分层:muted 段动词(ing/done 时态,只有它带 shimmer)+ 深色
  裸计数 details(12 files, 4 searches, 3 commands)。计数从 bucket 动词短语
  改为按 fragment 种类的裸名词,files/searches 拆分(browse 桶混算会导致
  「8 次搜索读成 8 个文件」)。
- 单工具段保持原有具体 label,不叠段动词(避免 Running Run ls 式结巴)。
- now 行从 live-peek-line 换成 demo 的滚动行:同正文大小、cop-title 色、
  translateY roll 动画;工具输入未流完时显示 pending 文案(与组内行一致)。
- i18n:phase 重构为 ing/done 对,新增 frag.* 与 fragmentSeparator,删 runtime。
---
 apps/web/src/i18n/locales/en.json             |  32 +--
 apps/web/src/i18n/locales/ja.json             |  34 +--
 apps/web/src/i18n/locales/zh.json             |  32 +--
 .../src/pages/home/components/chat-pane.vue   |  35 ----
 .../pages/home/components/composer-dock.vue   |  27 ---
 .../home/components/composer-runtime-line.vue |  89 --------
 .../home/components/tool-call-group.test.ts   | 136 ++++++++----
 .../pages/home/components/tool-call-group.vue | 195 +++++++++++-------
 .../home/components/tool-call-registry.ts     |  31 +++
 9 files changed, 305 insertions(+), 306 deletions(-)
 delete mode 100644 apps/web/src/pages/home/components/composer-runtime-line.vue

diff --git a/apps/web/src/i18n/locales/en.json b/apps/web/src/i18n/locales/en.json
index d2e7fdb5e..704ccbd79 100644
--- a/apps/web/src/i18n/locales/en.json
+++ b/apps/web/src/i18n/locales/en.json
@@ -667,16 +667,27 @@
       "thoughtBriefly": "Thought for a couple of seconds",
       "thoughtSeconds": "Thought for {seconds}s",
       "phase": {
-        "browse": "Exploring",
-        "edit": "Editing",
-        "run": "Running",
-        "message": "Messaging",
-        "schedule": "Scheduling",
-        "media": "Generating",
-        "agent": "Delegating",
-        "gui": "Browsing",
-        "other": "Working"
+        "browse": { "ing": "Exploring", "done": "Explored" },
+        "edit": { "ing": "Editing", "done": "Edited" },
+        "run": { "ing": "Running", "done": "Ran" },
+        "message": { "ing": "Messaging", "done": "Sent" },
+        "schedule": { "ing": "Scheduling", "done": "Scheduled" },
+        "media": { "ing": "Generating", "done": "Generated" },
+        "agent": { "ing": "Delegating", "done": "Delegated" },
+        "gui": { "ing": "Browsing", "done": "Browsed" },
+        "other": { "ing": "Working", "done": "Worked" }
       },
+      "frag": {
+        "files": "{count} files",
+        "searches": "{count} searches",
+        "commands": "{count} commands",
+        "messages": "{count} messages",
+        "schedules": "{count} schedules",
+        "media": "{count} media files",
+        "agents": "{count} agents",
+        "sites": "{count} sites"
+      },
+      "fragmentSeparator": ", ",
       "thinkingHints": [
         "Connecting the dots",
         "Piecing it together",
@@ -688,9 +699,6 @@
         "Taking a closer look"
       ]
     },
-    "runtime": {
-      "working": "Working"
-    },
     "currentBot": "Current Bot",
     "inputPlaceholder": "Ask anything…",
     "readonlyHint": "This chat is read-only",
diff --git a/apps/web/src/i18n/locales/ja.json b/apps/web/src/i18n/locales/ja.json
index 4e5209cff..dc6723577 100644
--- a/apps/web/src/i18n/locales/ja.json
+++ b/apps/web/src/i18n/locales/ja.json
@@ -651,19 +651,27 @@
       "thoughtBriefly": "少し考えた",
       "thoughtSeconds": "{seconds}秒考えました",
       "phase": {
-        "browse": "探索中",
-        "edit": "編集中",
-        "run": "実行中",
-        "message": "送信中",
-        "schedule": "変更中",
-        "media": "生成中",
-        "agent": "委譲中",
-        "gui": "閲覧中",
-        "other": "作業中"
-      }
-    },
-    "runtime": {
-      "working": "作業中"
+        "browse": { "ing": "探索中", "done": "探索しました" },
+        "edit": { "ing": "編集中", "done": "編集しました" },
+        "run": { "ing": "実行中", "done": "実行しました" },
+        "message": { "ing": "送信中", "done": "送信しました" },
+        "schedule": { "ing": "変更中", "done": "変更しました" },
+        "media": { "ing": "生成中", "done": "生成しました" },
+        "agent": { "ing": "委譲中", "done": "委譲しました" },
+        "gui": { "ing": "閲覧中", "done": "閲覧しました" },
+        "other": { "ing": "作業中", "done": "作業しました" }
+      },
+      "frag": {
+        "files": "{count} ファイル",
+        "searches": "{count} 件の検索",
+        "commands": "{count} コマンド",
+        "messages": "{count} 件のメッセージ",
+        "schedules": "{count} 件のスケジュール",
+        "media": "{count} 個のメディアファイル",
+        "agents": "{count} のAgent",
+        "sites": "{count} 件のサイト"
+      },
+      "fragmentSeparator": "、"
     },
     "currentBot": "現在のBot",
     "inputPlaceholder": "質問を入力してください…",
diff --git a/apps/web/src/i18n/locales/zh.json b/apps/web/src/i18n/locales/zh.json
index 735408013..1f0868d6f 100644
--- a/apps/web/src/i18n/locales/zh.json
+++ b/apps/web/src/i18n/locales/zh.json
@@ -667,16 +667,27 @@
       "thoughtBriefly": "思考了几秒",
       "thoughtSeconds": "已思考 {seconds} 秒",
       "phase": {
-        "browse": "探索中",
-        "edit": "修改中",
-        "run": "运行中",
-        "message": "发送中",
-        "schedule": "调整中",
-        "media": "生成中",
-        "agent": "委派中",
-        "gui": "浏览中",
-        "other": "处理中"
+        "browse": { "ing": "探索中", "done": "已探索" },
+        "edit": { "ing": "修改中", "done": "已修改" },
+        "run": { "ing": "运行中", "done": "已运行" },
+        "message": { "ing": "发送中", "done": "已发送" },
+        "schedule": { "ing": "调整中", "done": "已调整" },
+        "media": { "ing": "生成中", "done": "已生成" },
+        "agent": { "ing": "委派中", "done": "已委派" },
+        "gui": { "ing": "浏览中", "done": "已浏览" },
+        "other": { "ing": "处理中", "done": "已处理" }
       },
+      "frag": {
+        "files": "{count} 个文件",
+        "searches": "{count} 次搜索",
+        "commands": "{count} 条命令",
+        "messages": "{count} 条消息",
+        "schedules": "{count} 个定时任务",
+        "media": "{count} 个媒体文件",
+        "agents": "{count} 个 Agent",
+        "sites": "{count} 个网站"
+      },
+      "fragmentSeparator": "、",
       "thinkingHints": [
         "正在连接线索",
         "正在拼合信息",
@@ -688,9 +699,6 @@
         "正在仔细查看"
       ]
     },
-    "runtime": {
-      "working": "工作中"
-    },
     "currentBot": "当前 Bot",
     "inputPlaceholder": "问点什么…",
     "readonlyHint": "该聊天为只读",
diff --git a/apps/web/src/pages/home/components/chat-pane.vue b/apps/web/src/pages/home/components/chat-pane.vue
index d56104958..0de2f20f2 100644
--- a/apps/web/src/pages/home/components/chat-pane.vue
+++ b/apps/web/src/pages/home/components/chat-pane.vue
@@ -379,9 +379,6 @@
               :command-panel="composerCommandPanel"
               :error-message="composerError"
               :pending-user-input="pendingUserInput"
-              :runtime-active="runtimeLineActive"
-              :runtime-started-at="runtimeLineStartedAt"
-              :runtime-steps="runtimeLineSteps"
               @select-command-item="selectCommandResultItem"
               @dismiss-command="clearCurrentCommandEvent"
               @reveal-composer="handleDockRevealComposer"
@@ -1145,38 +1142,6 @@ const { items: pendingApprovals } = usePendingApprovals(messages)
 
 const hasPendingToolApproval = computed(() => pendingApprovals.value.length > 0)
 
-// Inputs for the dock's runtime line. The line claims "the agent is working",
-// so its active gate is stricter than `streaming` alone: a turn blocked on an
-// approval or an ask_user answer is waiting on the USER, and the panel for
-// that decision is already telling it — the line would argue with it.
-const runtimeLineActive = computed(() =>
-  streaming.value && !pendingUserInput.value && !hasPendingToolApproval.value)
-
-// The streaming assistant turn, when one is visible in this pane. Its
-// timestamp is the turn's real start (survives pane remounts mid-stream);
-// its tool-block count is the line's growing "steps" signal.
-const streamingTurn = computed(() => {
-  if (!streaming.value) return null
-  for (let i = messages.value.length - 1; i >= 0; i -= 1) {
-    const message = messages.value[i]!
-    if (message.role === 'assistant' && message.streaming) return message
-  }
-  return null
-})
-
-const runtimeLineStartedAt = computed(() => {
-  const timestamp = streamingTurn.value?.timestamp
-  if (!timestamp) return null
-  const ms = Date.parse(timestamp)
-  return Number.isFinite(ms) ? ms : null
-})
-
-const runtimeLineSteps = computed(() => {
-  const turn = streamingTurn.value
-  if (!turn || turn.role !== 'assistant') return 0
-  return turn.messages.filter(block => block.type === 'tool').length
-})
-
 const canForkAssistant = computed(() =>
   !streaming.value
   && !loadingMessages.value
diff --git a/apps/web/src/pages/home/components/composer-dock.vue b/apps/web/src/pages/home/components/composer-dock.vue
index a80d0ec9b..6dca61038 100644
--- a/apps/web/src/pages/home/components/composer-dock.vue
+++ b/apps/web/src/pages/home/components/composer-dock.vue
@@ -26,26 +26,6 @@
       :user-input="pendingUserInput"
       @reveal-composer="handleUserInputReveal"
     />
-    <!-- The runtime line hugs the box the way the panel does, but it is a
-         STATUS member, not a stack member: nothing to click, nothing to
-         answer. The pane gates `runtimeActive` (streaming AND not blocked on
-         the user) so the line never argues with an approval/ask_user panel
-         about what the turn is waiting on. -->
-    <Transition
-      enter-active-class="transition-opacity duration-150 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-100 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <ComposerRuntimeLine
-        v-if="runtimeActive"
-        :active="runtimeActive"
-        :started-at="runtimeStartedAt"
-        :steps="runtimeSteps"
-      />
-    </Transition>
     <div
       v-show="composerVisible"
       ref="boxEl"
@@ -86,7 +66,6 @@
 import { computed, ref, watch } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import ComposerPanel from './composer-panel.vue'
-import ComposerRuntimeLine from './composer-runtime-line.vue'
 import ChatUserInputForm from './chat-user-input-form.vue'
 import { COMPOSER_MASK_BELOW_PX } from '../composables/useComposerLayout'
 import type { PendingApprovalItem } from '../composables/usePendingApprovals'
@@ -106,12 +85,6 @@ const props = defineProps<{
   commandPanel: CommandPanelData | null
   errorMessage: string
   pendingUserInput: UIUserInput | null
-  // Runtime-line inputs, owned by the pane (it alone knows the streaming turn
-  // and what the turn is blocked on). All three are inert unless
-  // runtimeActive is on.
-  runtimeActive?: boolean
-  runtimeStartedAt?: number | null
-  runtimeSteps?: number
 }>()
 
 const emit = defineEmits<{
diff --git a/apps/web/src/pages/home/components/composer-runtime-line.vue b/apps/web/src/pages/home/components/composer-runtime-line.vue
deleted file mode 100644
index 8f3562018..000000000
--- a/apps/web/src/pages/home/components/composer-runtime-line.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <!--
-    Runtime line — the turn-level "alive" signal that rides with the composer
-    instead of scrolling away with the transcript. Process-group headers
-    answer "what is it doing" inside the message flow; this line stays put and
-    answers "is it still working" with signals that MOVE rather than a fake
-    percentage: the clock ticks and the step count grows. While the turn is
-    blocked on the user (approval / ask_user) the caller hides it — the panel
-    above is the one telling that story, and two status surfaces disagreeing
-    is worse than one. Token throughput would be the stronger "model is alive"
-    signal, but the stream does not carry usage yet; elapsed + steps are the
-    honest client-side proxies until it does.
-  -->
-  <div
-    class="flex items-center gap-1.5 px-1.5 pb-1.5 text-xs text-muted-foreground select-none"
-    role="status"
-  >
-    <span class="tool-shimmer-text">{{ t('chat.runtime.working') }}</span>
-    <template v-if="elapsedLabel">
-      <span aria-hidden="true">·</span>
-      <span class="font-mono">{{ elapsedLabel }}</span>
-    </template>
-    <template v-if="steps > 0">
-      <span aria-hidden="true">·</span>
-      <span>{{ t('chat.process.steps', { count: steps }) }}</span>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const props = withDefaults(defineProps<{
-  active: boolean
-  // Turn start in epoch ms when known (the streaming turn's timestamp); null
-  // when the turn's start is not observable (e.g. an unbound composer stream),
-  // in which case the line stamps its own start when `active` flips on.
-  startedAt?: number | null
-  // Tool calls the turn has run so far.
-  steps?: number
-}>(), {
-  startedAt: null,
-  steps: 0,
-})
-
-const { t } = useI18n()
-
-const now = ref(Date.now())
-let selfStart = 0
-let timer: ReturnType<typeof setInterval> | null = null
-
-function clearTimer() {
-  if (timer !== null) {
-    clearInterval(timer)
-    timer = null
-  }
-}
-
-watch(
-  () => props.active,
-  (active) => {
-    clearTimer()
-    if (!active) return
-    selfStart = Date.now()
-    now.value = Date.now()
-    // One tick per second is the calmest cadence that still proves "alive";
-    // only this line re-renders (the ref is local), not the dock around it.
-    timer = setInterval(() => { now.value = Date.now() }, 1000)
-  },
-  { immediate: true },
-)
-
-onBeforeUnmount(clearTimer)
-
-// Symbol units (s/m/h) are locale-neutral runtime chrome, deliberately not
-// i18n'd — they name units, not sentences.
-const elapsedLabel = computed(() => {
-  if (!props.active) return ''
-  const start = props.startedAt ?? selfStart
-  if (!start) return ''
-  const seconds = Math.max(0, Math.floor((now.value - start) / 1000))
-  if (seconds < 60) return `${seconds}s`
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ${String(seconds % 60).padStart(2, '0')}s`
-  const hours = Math.floor(minutes / 60)
-  return `${hours}h ${String(minutes % 60).padStart(2, '0')}m`
-})
-</script>
diff --git a/apps/web/src/pages/home/components/tool-call-group.test.ts b/apps/web/src/pages/home/components/tool-call-group.test.ts
index f4e2a3990..7997b390a 100644
--- a/apps/web/src/pages/home/components/tool-call-group.test.ts
+++ b/apps/web/src/pages/home/components/tool-call-group.test.ts
@@ -22,11 +22,12 @@ import ToolCallGroup from './tool-call-group.vue'
 //    block used to keep the header saying "Thinking…" indefinitely on a
 //    finished turn.
 //
-// 2. The two-layer adaptive header: while a segment streams, the header names
-//    the phase + live tally and a "now" line below rolls the current call;
-//    once the segment settles, the header shows the final tally plus the diff
-//    totals. This guards against regressing to a bare ticker of the latest
-//    call (which hid the aggregate view until the segment settled).
+// 2. The two-layer adaptive header: while a segment streams, a muted phase
+//    verb ("Exploring") leads the header with live bare-count details
+//    ("2 files, ran 1 command"), and a "now" line below rolls the current
+//    call; once the segment settles, the verb turns past tense ("Explored")
+//    and diff totals appear. This guards against regressing to a bare ticker
+//    of the latest call (which hid the aggregate view until settle).
 
 interface MountedGroup {
   app: ReturnType<typeof createApp>
@@ -63,22 +64,36 @@ function mountGroup(items: ContentBlock[], active: boolean | undefined): HTMLDiv
           process: {
             thought: 'Thought',
             steps: '{count} steps',
-            browse: 'Read {count} files',
-            edit: 'Edited {count} files',
-            run: 'Ran {count} commands',
+            fragmentSeparator: ', ',
             phase: {
-              browse: 'Exploring',
-              edit: 'Editing',
-              run: 'Running',
-              message: 'Messaging',
-              schedule: 'Scheduling',
-              media: 'Generating',
-              agent: 'Delegating',
-              gui: 'Browsing',
-              other: 'Working',
+              browse: { ing: 'Exploring', done: 'Explored' },
+              edit: { ing: 'Editing', done: 'Edited' },
+              run: { ing: 'Running', done: 'Ran' },
+              message: { ing: 'Messaging', done: 'Sent' },
+              schedule: { ing: 'Scheduling', done: 'Scheduled' },
+              media: { ing: 'Generating', done: 'Generated' },
+              agent: { ing: 'Delegating', done: 'Delegated' },
+              gui: { ing: 'Browsing', done: 'Browsed' },
+              other: { ing: 'Working', done: 'Worked' },
             },
+            frag: {
+              files: '{count} files',
+              searches: '{count} searches',
+              commands: '{count} commands',
+              messages: '{count} messages',
+              schedules: '{count} schedules',
+              media: '{count} media files',
+              agents: '{count} agents',
+              sites: '{count} sites',
+            },
+          },
+          tools: {
+            run: 'Run',
+            read: 'Read',
+            exec: 'Run',
+            edit: 'Edit',
+            pending: { generic: 'Working…' },
           },
-          tools: { run: 'Run', read: 'Read', exec: 'Run', edit: 'Edit' },
         },
       },
     },
@@ -88,17 +103,15 @@ function mountGroup(items: ContentBlock[], active: boolean | undefined): HTMLDiv
   return root
 }
 
+// The header row is the toggleable button; its whole text covers verb +
+// details + diffs.
 function headerText(root: HTMLElement): string {
-  // The header label is the span inside the toggleable header row; the capsule
-  // body holds the per-item rows, so restricting to the first button-bound
-  // region would be brittle — take the first span with the tracking class.
-  const spans = [...root.querySelectorAll('span')]
-  const header = spans.find(span => (span.textContent ?? '').length > 0)
-  return header?.textContent ?? ''
+  const button = root.querySelector('button')
+  return button?.textContent ?? ''
 }
 
 function nowLine(root: HTMLElement): HTMLElement | null {
-  return root.querySelector('.live-peek-line')
+  return root.querySelector('.now-line')
 }
 
 function bgExecTool(id: number, running: boolean): ToolCallBlockType {
@@ -137,21 +150,22 @@ function reasoning(id: number): ThinkingBlockType {
 describe('ToolCallGroup live header gating (#1106)', () => {
   it('keeps the live two-layer header while the turn is streaming', () => {
     const root = mountGroup([bgExecTool(1, true), reasoning(2)], true)
-    // Header = the segment's phase (a command run), now line = the model's
-    // current step — the layering the old ticker-only header couldn't express.
-    expect(headerText(root)).toBe('Running')
+    // Single-tool segment: header keeps the tool's own specific label; the now
+    // line carries the model's current step. No phase verb stutter ("Running
+    // Run xray run") and no bare ticker of the latest item.
+    expect(headerText(root)).toContain('xray run')
     expect(nowLine(root)?.textContent).toContain('Thinking')
   })
 
   it('drops the live header when the turn finished even if a background tool is still running', () => {
     const root = mountGroup([bgExecTool(1, true), reasoning(2)], false)
-    // Aggregate summary, not "Thinking" — the model is done; only the spawned
-    // command is alive, and its own row reports that.
+    // Settled single-tool label, not "Thinking" — the model is done; only the
+    // spawned command is alive, and its own row reports that.
     expect(headerText(root)).not.toBe('Thinking')
     expect(nowLine(root)).toBeNull()
   })
 
-  it('shows the aggregate summary once the turn finished and tools settled', () => {
+  it('shows the settled label once the turn finished and tools settled', () => {
     const root = mountGroup([bgExecTool(1, false), reasoning(2)], false)
     expect(headerText(root)).not.toBe('Thinking')
     expect(nowLine(root)).toBeNull()
@@ -159,34 +173,33 @@ describe('ToolCallGroup live header gating (#1106)', () => {
 })
 
 describe('ToolCallGroup adaptive header layers', () => {
-  it('names the phase and live tally in the header while streaming, and rolls the current call below', () => {
+  it('names the phase and live bare counts in the header, and rolls the current call below', () => {
     const root = mountGroup([
       toolBlock('read', { path: 'src/auth/session.ts' }),
       toolBlock('read', { path: 'src/auth/cookie.ts' }),
       toolBlock('exec', { command: 'pnpm test' }, true),
     ], true)
 
-    expect(headerText(root)).toContain('Exploring')
-    expect(headerText(root)).toContain('Read 2 files')
-    expect(headerText(root)).toContain('Ran 1 command')
+    const header = headerText(root)
+    expect(header).toContain('Exploring')
+    expect(header).toContain('2 files')
+    expect(header).toContain('1 command')
     expect(nowLine(root)?.textContent).toContain('pnpm test')
   })
 
-  it('settles to the final tally with diff totals and no now line', () => {
+  it('settles to a past-tense verb with final counts and diff totals', () => {
     const root = mountGroup([
       toolBlock('edit', { path: 'a.ts', old_text: 'l1\nl2\nl3', new_text: 'n1\nn2\nn3\nn4\nn5' }),
       toolBlock('edit', { path: 'b.ts', old_text: 'l1\nl2', new_text: 'n1\nn2\nn3\nn4' }),
     ], false)
 
     const header = headerText(root)
-    expect(header).toContain('Edited 2 files')
+    expect(header).toContain('Edited')
+    expect(header).toContain('2 files')
+    expect(header).toContain('+9')
+    expect(header).toContain('-5')
     expect(header).not.toContain('Editing')
     expect(nowLine(root)).toBeNull()
-    // Diff totals are separate mono spans next to the label, not part of the
-    // label text — assert them on the header row as a whole.
-    const row = root.querySelector('button')
-    expect(row?.textContent).toContain('+9')
-    expect(row?.textContent).toContain('-5')
   })
 
   it('keeps diff totals hidden while the segment is still streaming', () => {
@@ -195,9 +208,42 @@ describe('ToolCallGroup adaptive header layers', () => {
       toolBlock('edit', { path: 'b.ts', old_text: 'l1', new_text: 'n1\nn2' }),
     ], true)
 
-    const row = root.querySelector('button')
-    expect(headerText(root)).toContain('Editing')
-    expect(row?.textContent).not.toContain('+4')
+    const header = headerText(root)
+    expect(header).toContain('Editing')
+    expect(header).not.toContain('+4')
+  })
+
+  it('keeps a lone live tool on its own specific label, no phase verb', () => {
+    const root = mountGroup([
+      toolBlock('read', { path: 'src/main.ts' }),
+      reasoning(2),
+    ], true)
+
+    const header = headerText(root)
+    expect(header).toContain('main.ts')
+    expect(header).not.toContain('Exploring')
+    expect(nowLine(root)?.textContent).toContain('Thinking')
+  })
+
+  it('keeps a lone settled tool on its own specific label, no verb', () => {
+    const root = mountGroup([
+      toolBlock('exec', { command: 'pnpm build' }),
+      reasoning(2),
+    ], false)
+
+    const header = headerText(root)
+    expect(header).toContain('pnpm build')
+    expect(header).not.toContain('Ran')
+  })
+
+  it('shows the pending label in the now line while a tool input is still streaming in', () => {
+    const root = mountGroup([
+      toolBlock('read', { path: 'a.ts' }),
+      toolBlock('read', { path: 'b.ts' }),
+      toolBlock('exec', {}, true),
+    ], true)
+
+    expect(nowLine(root)?.textContent).toContain('Working…')
   })
 
   it('hides the now line once the user opens the body', async () => {
diff --git a/apps/web/src/pages/home/components/tool-call-group.vue b/apps/web/src/pages/home/components/tool-call-group.vue
index 86ee43a05..af90b7a84 100644
--- a/apps/web/src/pages/home/components/tool-call-group.vue
+++ b/apps/web/src/pages/home/components/tool-call-group.vue
@@ -34,7 +34,20 @@
           :connector="item"
         />
       </div>
+      <!-- Two-tone adaptive title: a muted verb names the phase ("Exploring"
+           while streaming, "Explored" once settled) followed by the darker
+           bare-count details. ONLY the verb carries the shimmer — shimmering
+           the counts too turns the whole line into uniform noise and kills the
+           contrast between "phase" and "progress". -->
+      <template v-if="verbLabel">
+        <span
+          class="shrink-0 tracking-[0.01em]"
+          :class="(active || anyToolRunning) ? 'tool-shimmer-text' : 'text-muted-foreground'"
+        >{{ verbLabel }}</span>
+        <span class="min-w-0 truncate tabular-nums">{{ detailsLabel }}</span>
+      </template>
       <span
+        v-else
         class="min-w-0 truncate tracking-[0.01em]"
         :class="anyToolRunning || active ? 'tool-shimmer-text' : ''"
       >{{ headerLabel }}</span>
@@ -56,15 +69,21 @@
     </HeaderRow>
 
     <!-- Second layer of the running header: the header names the phase and the
-         live tally ("Exploring · Read 3 files"), this line rolls the one call
-         happening right now ("Read session-adapter.ts"). Only while collapsed —
-         an open capsule's own last row already carries that signal, so the line
-         steps aside instead of double-rendering it. -->
-    <LivePeekLine
+         live tally, this line rolls the one call happening right now. Only
+         while collapsed — an open capsule's own last row already carries that
+         signal, so the line steps aside instead of double-rendering it. -->
+    <div
       v-if="active && !open"
-      class="mt-0.5"
-      :text="tickerLabel"
-    />
+      class="now-line relative h-[1lh] overflow-hidden mt-0.5 text-cop-title"
+    >
+      <Transition name="now-roll">
+        <div
+          :key="tickerLabel"
+          class="absolute inset-0 truncate"
+          v-text="tickerLabel"
+        />
+      </Transition>
+    </div>
 
     <CollapseSection :open="open">
       <!-- Card body sets the in-card type scale (one notch below the root-level
@@ -106,11 +125,19 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { ContentBlock, ThinkingBlock as ThinkingBlockType, ToolCallBlock as ToolCallBlockType } from '@/store/chat-list'
-import { SUMMARY_BUCKET_ORDER, getToolDisplay, isGuiTool, toolBucket, type ToolBucket } from './tool-call-registry'
+import {
+  SUMMARY_BUCKET_ORDER,
+  SUMMARY_FRAGMENT_ORDER,
+  getToolDisplay,
+  isGuiTool,
+  toolBucket,
+  toolFragmentKind,
+  type SummaryFragment,
+  type ToolBucket,
+} from './tool-call-registry'
 import ToolCallInline from './tool-call-inline.vue'
 import ThinkingBlock from './thinking-block.vue'
 import CollapseSection from './collapse-section.vue'
-import LivePeekLine from './live-peek-line.vue'
 import { getCollapseOpen, groupCollapseKey, setCollapseOpen } from './process-collapse'
 import HeaderRow from './tool-detail/header-row.vue'
 import ExpandChevron from './tool-detail/expand-chevron.vue'
@@ -160,8 +187,8 @@ function toggle() {
 }
 
 // Any tool still executing (a live foreground tool during streaming, or a
-// background task outliving the turn). Drives the shimmer only; the label
-// choice is `active`-gated (see headerLabel).
+// background task outliving the turn). Drives the shimmer only; the header's
+// text content is `active`-gated (see verbLabel/detailsLabel).
 const anyToolRunning = computed(() => toolItems.value.some(tool => tool.running))
 
 function basename(path: string): string {
@@ -191,10 +218,6 @@ function labelFor(tool: ToolCallBlockType): string {
   return subject ? `${verb} ${subject}` : verb
 }
 
-// Collapsed summary: a single tool keeps its subject; multiple tools fall back
-// to category counts ("Read 3 files · Edited 2 files"). The buckets live in the
-// registry so this header and the per-row display share one tool catalog.
-
 // Where a browser navigation went, by host — the one piece of a browsing run
 // worth surfacing in the collapsed header ("Browsed example.com").
 function navigateHost(tool: ToolCallBlockType): string {
@@ -210,44 +233,10 @@ function navigateHost(tool: ToolCallBlockType): string {
   }
 }
 
-// Bucket tally shared by both header states ("Read 3 files · Ran 2 commands").
-// It recomputes as blocks land, so while streaming this is the "it grows" half
-// of the header — the aggregate view the old ticker-only header only revealed
-// after the segment settled.
-const tallyLabel = computed(() => {
-  const tools = toolItems.value
-  const acc = new Map<string, number>()
-  for (const tool of tools) {
-    const b = toolBucket(tool.toolName)
-    if (b !== 'other') acc.set(b, (acc.get(b) ?? 0) + 1)
-  }
-  const segments = SUMMARY_BUCKET_ORDER
-    .filter(b => acc.has(b))
-    .map(b => t(`chat.process.${b}`, { count: acc.get(b)! }))
-  return segments.length ? segments.join(' · ') : t('chat.process.steps', { count: tools.length })
-})
-
-const aggregateLabel = computed(() => {
-  const tools = toolItems.value
-  if (tools.length === 0) return t('chat.process.thought')
-  if (tools.length === 1) return labelFor(tools[0]!)
-  // A browsing/desktop run is summarized by where it went, not by the screenshot
-  // reads it folded in — name the destination, fall back to a step count.
-  if (tools.some(tool => isGuiTool(tool.toolName))) {
-    const hosts = [...new Set(tools.map(navigateHost).filter(Boolean))]
-    if (hosts.length === 1) return t('chat.process.browsed', { target: hosts[0] })
-    if (hosts.length > 1) return t('chat.process.browsedSites', { count: hosts.length })
-    return t('chat.process.steps', { count: tools.length })
-  }
-  return tallyLabel.value
-})
-
-// Phase of the segment, by its dominant bucket — the streaming header's first
-// layer. It names WHAT KIND of work is running ("Exploring") while the tally
-// says how much has been done; the shimmer on it is the alive signal. A GUI
-// run is always "Browsing" regardless of mix (its observe+action steps are one
-// browsing activity). Ties break by SUMMARY_BUCKET_ORDER; 'other' never wins
-// a tie because a generic "Working" adds nothing over the tally alone.
+// Phase of the segment, by its dominant bucket. Ties break by
+// SUMMARY_BUCKET_ORDER; 'other' never wins a tie because a generic "Working"
+// adds nothing over the details alone. A GUI run is always "Browsing"
+// regardless of mix (its observe+action steps are one browsing activity).
 const phaseKey = computed<ToolBucket | 'gui' | null>(() => {
   const tools = toolItems.value
   if (tools.length === 0) return null
@@ -270,17 +259,48 @@ const phaseKey = computed<ToolBucket | 'gui' | null>(() => {
   return best
 })
 
-// Streaming header: phase verb + live tally. A lone tool keeps its specific
-// label off the header (the now line below already rolls it), so the verb
-// stands alone; a thought-only segment reads as "Thinking…".
-const runningHeadline = computed(() => {
+// The verb names the phase; its tense is the segment's own lifecycle — present
+// while THIS segment is the streaming tail, past once anything supersedes it.
+// Only genuine multi-tool segments get the verb+details split: a lone tool's
+// own label ("Run ls /tmp") already IS the specific, and prefixing its bucket
+// verb would stutter ("Running Run ls /tmp") while duplicating the now line.
+const verbLabel = computed(() => {
   const tools = toolItems.value
-  if (tools.length === 0) return t('chat.thinkingInProgress')
+  if (tools.length <= 1) return ''
   const key = phaseKey.value
-  if (!key) return t('chat.thinkingInProgress')
-  const verb = t(`chat.process.phase.${key}`)
-  if (tools.length === 1 || key === 'gui') return verb
-  return `${verb} · ${tallyLabel.value}`
+  if (!key) return ''
+  return t(`chat.process.phase.${key}.${props.active ? 'ing' : 'done'}`)
+})
+
+// The details half: bare counts ("12 files, 4 searches, ran 3 commands") that
+// grow live while streaming and settle with the segment. GUI runs name the
+// destination instead.
+const detailsLabel = computed(() => {
+  const tools = toolItems.value
+  if (tools.length === 0) return props.active ? t('chat.thinkingInProgress') : t('chat.process.thought')
+  if (phaseKey.value === 'gui') {
+    const hosts = [...new Set(tools.map(navigateHost).filter(Boolean))]
+    if (hosts.length === 1) return hosts[0]!
+    if (hosts.length > 1) return t('chat.process.frag.sites', { count: hosts.length })
+    return t('chat.process.steps', { count: tools.length })
+  }
+  const counts = new Map<SummaryFragment, number>()
+  for (const tool of tools) {
+    const kind = toolFragmentKind(tool.toolName)
+    counts.set(kind, (counts.get(kind) ?? 0) + 1)
+  }
+  const parts = SUMMARY_FRAGMENT_ORDER
+    .filter(kind => counts.has(kind))
+    .map(kind => t(`chat.process.frag.${kind}`, { count: counts.get(kind)! }))
+  return parts.length ? parts.join(t('chat.process.fragmentSeparator')) : t('chat.process.steps', { count: tools.length })
+})
+
+// Single-span fallback for the two cases without a verb: a thought-only
+// segment ("Thinking…" / "Thought") and a lone settled tool (its own label).
+const headerLabel = computed(() => {
+  const tools = toolItems.value
+  if (tools.length === 0) return props.active ? t('chat.thinkingInProgress') : t('chat.process.thought')
+  return labelFor(tools[0]!)
 })
 
 // Segment-level diff totals for the settled header (+284 −96), summed from
@@ -296,19 +316,48 @@ const diffTotals = computed(() => {
   return { add, remove }
 })
 
-// Streaming now line rolls the current (last) item.
+// The now line rolls the current (last) item. A reasoning tail reads as
+// "Thinking…"; a tool whose input hasn't streamed yet gets the pending label
+// (same wording as its in-capsule row) instead of a target-less bare verb.
 const tickerLabel = computed(() => {
   const current = props.items[props.items.length - 1]
   if (!current) return ''
   if (current.type === 'reasoning') return t('chat.thinkingInProgress')
-  if (current.type === 'tool') return labelFor(current as ToolCallBlockType)
-  return aggregateLabel.value
+  if (current.type === 'tool') {
+    const tool = current as ToolCallBlockType
+    const input = tool.input
+    const inputReady = input && typeof input === 'object' && Object.keys(input as Record<string, unknown>).length > 0
+    if (tool.running && !inputReady) {
+      const display = getToolDisplay(tool)
+      return t(`chat.tools.pending.${display.actionKey}`, t('chat.tools.pending.generic'))
+    }
+    return labelFor(tool)
+  }
+  return headerLabel.value
 })
-
-// The header is a two-layer live summary ONLY while the turn itself is
-// streaming (`active`). A still-running background task inside a finished turn
-// must not keep the ticker alive: "Thinking…" is a claim about the model, and
-// a background command the model started before finishing says nothing about
-// the model. The background tool's own row already shows its running state.
-const headerLabel = computed(() => (props.active ? runningHeadline.value : aggregateLabel.value))
 </script>
+
+<style scoped>
+/* Roll animation for the now line: incoming row rises from below, outgoing
+   exits upward, both absolutely positioned so they overlap mid-swap. 300ms
+   matches the house motion palette's gentle end. */
+.now-roll-enter-active,
+.now-roll-leave-active {
+  transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.now-roll-enter-from {
+  transform: translateY(calc(100% + 1px));
+}
+
+.now-roll-leave-to {
+  transform: translateY(calc(-100% - 1px));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .now-roll-enter-active,
+  .now-roll-leave-active {
+    transition: none;
+  }
+}
+</style>
diff --git a/apps/web/src/pages/home/components/tool-call-registry.ts b/apps/web/src/pages/home/components/tool-call-registry.ts
index 31a338025..bfa155782 100644
--- a/apps/web/src/pages/home/components/tool-call-registry.ts
+++ b/apps/web/src/pages/home/components/tool-call-registry.ts
@@ -179,6 +179,37 @@ export function toolBucket(toolName: string): ToolBucket {
   return 'other'
 }
 
+// Fragment kinds for the group header's details half — the bare counts that
+// follow the phase verb ("Explored  12 files, 4 searches, ran 3 commands").
+// Finer-grained than ToolBucket on purpose: 'browse' lumps reads and searches
+// together, but a research run reading "8 files" when 6 of them were web
+// searches is the header lying. Anything not listed falls to 'steps' so the
+// header degrades to a plain step count instead of inventing a noun.
+export type SummaryFragment = 'files' | 'searches' | 'commands' | 'messages' | 'schedules' | 'media' | 'agents' | 'steps'
+
+const FRAGMENT_TOOLS: Array<[SummaryFragment, Set<string>]> = [
+  ['files', new Set(['read', 'list', 'write', 'edit', 'apply_patch'])],
+  ['commands', new Set(['exec'])],
+  ['messages', new Set(['send', 'react', 'send_email', 'speak'])],
+  ['schedules', new Set(['create_schedule', 'update_schedule', 'delete_schedule'])],
+  ['media', new Set(['generate_image', 'generate_video', 'transcribe_audio'])],
+  ['agents', new Set(['spawn_agent', 'send_message', 'list_agents'])],
+]
+
+export const SUMMARY_FRAGMENT_ORDER: SummaryFragment[] = [
+  'files', 'searches', 'commands', 'messages', 'schedules', 'media', 'agents', 'steps',
+]
+
+export function toolFragmentKind(toolName: string): SummaryFragment {
+  for (const [kind, names] of FRAGMENT_TOOLS) {
+    if (names.has(toolName)) return kind
+  }
+  // Read-only lookups (web/memory/message search, list_*/get_*, email reads,
+  // bg status, waits) all read to the user as "it looked something up" — one
+  // 'searches' counter keeps the header to one clause instead of a taxonomy.
+  return isReadOnlyTool(toolName) ? 'searches' : 'steps'
+}
+
 // GUI tools (browser + computer) interleave read-only "observe" and
 // side-effecting "action" calls as one continuous browsing activity. Splitting
 // them on every observe↔action flip would strand each step in its own segment,

From 9ea9927e1b9be41ef57bf7ef2e1e2f3c0d45a24d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=A8=E8=8B=92?=
 <16112591+chen-ran@users.noreply.github.com>
Date: Sat, 5 Sep 2026 03:18:29 +0800
Subject: [PATCH 3/3] fix(web): make adaptive tool summaries accurate

---
 apps/web/src/i18n/locales/en.json             |  3 +-
 apps/web/src/i18n/locales/ja.json             |  3 +-
 apps/web/src/i18n/locales/zh.json             |  3 +-
 .../home/components/tool-call-group.test.ts   | 35 ++++++++++++++++---
 .../home/components/tool-call-registry.ts     | 16 +++++----
 5 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/i18n/locales/en.json b/apps/web/src/i18n/locales/en.json
index 704ccbd79..44896f1a4 100644
--- a/apps/web/src/i18n/locales/en.json
+++ b/apps/web/src/i18n/locales/en.json
@@ -678,13 +678,14 @@
         "other": { "ing": "Working", "done": "Worked" }
       },
       "frag": {
-        "files": "{count} files",
+        "fileOperations": "{count} file operation | {count} file operations",
         "searches": "{count} searches",
         "commands": "{count} commands",
         "messages": "{count} messages",
         "schedules": "{count} schedules",
         "media": "{count} media files",
         "agents": "{count} agents",
+        "steps": "{count} step | {count} steps",
         "sites": "{count} sites"
       },
       "fragmentSeparator": ", ",
diff --git a/apps/web/src/i18n/locales/ja.json b/apps/web/src/i18n/locales/ja.json
index dc6723577..cb6245baa 100644
--- a/apps/web/src/i18n/locales/ja.json
+++ b/apps/web/src/i18n/locales/ja.json
@@ -662,13 +662,14 @@
         "other": { "ing": "作業中", "done": "作業しました" }
       },
       "frag": {
-        "files": "{count} ファイル",
+        "fileOperations": "ファイル操作 {count} 件",
         "searches": "{count} 件の検索",
         "commands": "{count} コマンド",
         "messages": "{count} 件のメッセージ",
         "schedules": "{count} 件のスケジュール",
         "media": "{count} 個のメディアファイル",
         "agents": "{count} のAgent",
+        "steps": "{count} ステップ",
         "sites": "{count} 件のサイト"
       },
       "fragmentSeparator": "、"
diff --git a/apps/web/src/i18n/locales/zh.json b/apps/web/src/i18n/locales/zh.json
index 1f0868d6f..c36498e5b 100644
--- a/apps/web/src/i18n/locales/zh.json
+++ b/apps/web/src/i18n/locales/zh.json
@@ -678,13 +678,14 @@
         "other": { "ing": "处理中", "done": "已处理" }
       },
       "frag": {
-        "files": "{count} 个文件",
+        "fileOperations": "{count} 次文件操作",
         "searches": "{count} 次搜索",
         "commands": "{count} 条命令",
         "messages": "{count} 条消息",
         "schedules": "{count} 个定时任务",
         "media": "{count} 个媒体文件",
         "agents": "{count} 个 Agent",
+        "steps": "{count} 步",
         "sites": "{count} 个网站"
       },
       "fragmentSeparator": "、",
diff --git a/apps/web/src/pages/home/components/tool-call-group.test.ts b/apps/web/src/pages/home/components/tool-call-group.test.ts
index 7997b390a..a9f925614 100644
--- a/apps/web/src/pages/home/components/tool-call-group.test.ts
+++ b/apps/web/src/pages/home/components/tool-call-group.test.ts
@@ -24,7 +24,7 @@ import ToolCallGroup from './tool-call-group.vue'
 //
 // 2. The two-layer adaptive header: while a segment streams, a muted phase
 //    verb ("Exploring") leads the header with live bare-count details
-//    ("2 files, ran 1 command"), and a "now" line below rolls the current
+//    ("2 file operations, 1 command"), and a "now" line below rolls the current
 //    call; once the segment settles, the verb turns past tense ("Explored")
 //    and diff totals appear. This guards against regressing to a bare ticker
 //    of the latest call (which hid the aggregate view until settle).
@@ -77,13 +77,14 @@ function mountGroup(items: ContentBlock[], active: boolean | undefined): HTMLDiv
               other: { ing: 'Working', done: 'Worked' },
             },
             frag: {
-              files: '{count} files',
+              fileOperations: '{count} file operation | {count} file operations',
               searches: '{count} searches',
               commands: '{count} commands',
               messages: '{count} messages',
               schedules: '{count} schedules',
               media: '{count} media files',
               agents: '{count} agents',
+              steps: '{count} step | {count} steps',
               sites: '{count} sites',
             },
           },
@@ -92,6 +93,7 @@ function mountGroup(items: ContentBlock[], active: boolean | undefined): HTMLDiv
             read: 'Read',
             exec: 'Run',
             edit: 'Edit',
+            ask_user: 'Ask user',
             pending: { generic: 'Working…' },
           },
         },
@@ -182,7 +184,7 @@ describe('ToolCallGroup adaptive header layers', () => {
 
     const header = headerText(root)
     expect(header).toContain('Exploring')
-    expect(header).toContain('2 files')
+    expect(header).toContain('2 file operations')
     expect(header).toContain('1 command')
     expect(nowLine(root)?.textContent).toContain('pnpm test')
   })
@@ -195,7 +197,7 @@ describe('ToolCallGroup adaptive header layers', () => {
 
     const header = headerText(root)
     expect(header).toContain('Edited')
-    expect(header).toContain('2 files')
+    expect(header).toContain('2 file operations')
     expect(header).toContain('+9')
     expect(header).toContain('-5')
     expect(header).not.toContain('Editing')
@@ -213,6 +215,31 @@ describe('ToolCallGroup adaptive header layers', () => {
     expect(header).not.toContain('+4')
   })
 
+  it('describes file tool calls as operations rather than unique files', () => {
+    const root = mountGroup([
+      toolBlock('edit', { path: 'same.ts', old_text: 'a', new_text: 'b' }),
+      toolBlock('edit', { path: 'same.ts', old_text: 'b', new_text: 'c' }),
+    ], false)
+
+    const header = headerText(root)
+    expect(header).toContain('2 file operations')
+    expect(header).not.toContain('2 files')
+  })
+
+  it('localizes the fallback count for unclassified tools', () => {
+    const root = mountGroup([
+      toolBlock('write', { path: 'a.ts', content: 'a' }),
+      toolBlock('ask_user', { question: 'Continue?' }, true),
+    ], true)
+
+    const header = headerText(root)
+    expect(header).toContain('1 file operation')
+    expect(header).not.toContain('1 file operations')
+    expect(header).toContain('1 step')
+    expect(header).not.toContain('1 steps')
+    expect(header).not.toContain('chat.process.frag.steps')
+  })
+
   it('keeps a lone live tool on its own specific label, no phase verb', () => {
     const root = mountGroup([
       toolBlock('read', { path: 'src/main.ts' }),
diff --git a/apps/web/src/pages/home/components/tool-call-registry.ts b/apps/web/src/pages/home/components/tool-call-registry.ts
index bfa155782..929834274 100644
--- a/apps/web/src/pages/home/components/tool-call-registry.ts
+++ b/apps/web/src/pages/home/components/tool-call-registry.ts
@@ -180,15 +180,17 @@ export function toolBucket(toolName: string): ToolBucket {
 }
 
 // Fragment kinds for the group header's details half — the bare counts that
-// follow the phase verb ("Explored  12 files, 4 searches, ran 3 commands").
+// follow the phase verb ("Explored 12 file operations, 4 searches, ran 3 commands").
 // Finer-grained than ToolBucket on purpose: 'browse' lumps reads and searches
-// together, but a research run reading "8 files" when 6 of them were web
-// searches is the header lying. Anything not listed falls to 'steps' so the
-// header degrades to a plain step count instead of inventing a noun.
-export type SummaryFragment = 'files' | 'searches' | 'commands' | 'messages' | 'schedules' | 'media' | 'agents' | 'steps'
+// together, but a research run reporting "8 file operations" when 6 calls
+// were web searches is the header lying. File tools deliberately count calls,
+// not unique files: one patch may touch several files and repeated reads may
+// target the same path. Anything not listed falls to 'steps' so the header
+// degrades to a plain step count instead of inventing a noun.
+export type SummaryFragment = 'fileOperations' | 'searches' | 'commands' | 'messages' | 'schedules' | 'media' | 'agents' | 'steps'
 
 const FRAGMENT_TOOLS: Array<[SummaryFragment, Set<string>]> = [
-  ['files', new Set(['read', 'list', 'write', 'edit', 'apply_patch'])],
+  ['fileOperations', new Set(['read', 'list', 'write', 'edit', 'apply_patch'])],
   ['commands', new Set(['exec'])],
   ['messages', new Set(['send', 'react', 'send_email', 'speak'])],
   ['schedules', new Set(['create_schedule', 'update_schedule', 'delete_schedule'])],
@@ -197,7 +199,7 @@ const FRAGMENT_TOOLS: Array<[SummaryFragment, Set<string>]> = [
 ]
 
 export const SUMMARY_FRAGMENT_ORDER: SummaryFragment[] = [
-  'files', 'searches', 'commands', 'messages', 'schedules', 'media', 'agents', 'steps',
+  'fileOperations', 'searches', 'commands', 'messages', 'schedules', 'media', 'agents', 'steps',
 ]
 
 export function toolFragmentKind(toolName: string): SummaryFragment {