@veltra/ai 2.1.9 → 2.1.11

package/src/components/ai-chat/__test__/ai-chat.test.ts

@@ -207,6 +207,8 @@ describe('UAiChat', () => {
     await vi.waitFor(() => {
       expect(host.querySelector('.u-ai-chat__tool-call-confirm')).toBeTruthy()
     })
+    // 待确认自动展开：确认前可查看参数
+    expect(host.querySelector('.u-ai-chat__tool-call.is-active')).toBeTruthy()
     expect(execute).not.toHaveBeenCalled()
 
     const allowBtn = [
@@ -286,21 +288,40 @@ describe('UAiChat', () => {
     ...extra
   })
 
-  it('render 自定义渲染替换卡片 body，完成后保持展开', async () => {
+  it('render 自定义渲染替换卡片 body，完成后默认折叠、展开后可见', async () => {
     const tools = [weatherTool({ render: createResultView('weather-view') })]
     const { host, chat, unmount } = mountAiChat({ transport: createWeatherTransport(), tools })
 
     chat.value?.send('北京天气')
 
-    // 最终答案输出后工具卡片收进「已完成」过程块，展开后 render 保持展开态
+    // 最终答案输出后工具卡片收进「已完成」过程块，展开后断言
     await expandProcess(host)
 
-    // 完成后保持展开，默认参数/结果区被替换
+    // render 工具完成后默认折叠（不再是保持展开）
+    expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
+    expect(host.querySelector('.u-ai-chat__tool-call.is-active')).toBeFalsy()
+
+    // 手动展开：render 替换默认参数/结果区
+    const header = host.querySelector<HTMLElement>('.u-ai-chat__tool-call .u-collapse__header')!
+    header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+    expect(host.querySelector('.weather-view')?.textContent).toContain('{"temperature":26}')
+    expect(host.querySelector('.u-ai-chat__tool-call-code')).toBeFalsy()
+    unmount()
+  })
+
+  it('terminal + render 的「UI 即答复」工具完成后保持展开', async () => {
+    const tools = [weatherTool({ render: createResultView('weather-view'), terminal: true })]
+    const { host, chat, unmount } = mountAiChat({ transport: createWeatherTransport(), tools })
+
+    chat.value?.send('北京天气')
+
+    // 终结工具成功即结束对话（无第二轮文本），答复卡片保持展开
     await vi.waitFor(() => {
       expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-active')).toBeTruthy()
     })
     expect(host.querySelector('.weather-view')?.textContent).toContain('{"temperature":26}')
-    expect(host.querySelector('.u-ai-chat__tool-call-code')).toBeFalsy()
     unmount()
   })
 
@@ -389,6 +410,43 @@ describe('UAiChat', () => {
     unmount()
   })
 
+  it('思考中默认折叠，头部右侧滚动展示最新一行思考', async () => {
+    // 由测试手动推进流式节奏，避免断言竞态
+    const steps: (() => void)[] = []
+    const transport: ChatTransport = async (_req, handlers) => {
+      handlers.onReasoningDelta?.('第一行思考')
+      await new Promise<void>((resolve) => steps.push(resolve))
+      handlers.onReasoningDelta?.('\n\n第二行思考')
+      await new Promise<void>((resolve) => steps.push(resolve))
+      handlers.onTextDelta('答案')
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('hi')
+
+    // 思考中：折叠态不挂载内容 DOM，头部标题为「思考中…」且右侧展示最新一行
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__reasoning-line')?.textContent).toBe('第一行思考')
+    })
+    expect(host.querySelector('.u-ai-chat__reasoning-title')?.textContent).toContain('思考中')
+    expect(host.querySelector('.u-ai-chat__reasoning-content')).toBeFalsy()
+
+    // 流式推进后滚动到最新一行（跳过空行）
+    steps.shift()?.()
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__reasoning-line')?.textContent).toBe('第二行思考')
+    })
+
+    // 正文开始输出后：标题回到「思考过程」，不再展示行
+    steps.shift()?.()
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('答案')
+    })
+    expect(host.querySelector('.u-ai-chat__reasoning-title')?.textContent).toContain('思考过程')
+    expect(host.querySelector('.u-ai-chat__reasoning-line')).toBeFalsy()
+    unmount()
+  })
+
   it('思考过程流式结束后自动折叠并卸载内容 DOM', async () => {
     const transport: ChatTransport = (_req, handlers) => {
       handlers.onReasoningDelta?.('先分析一下问题')
@@ -513,6 +571,12 @@ describe('UAiChat', () => {
     await expandProcess(host)
 
     expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
+
+    // 完成后默认折叠，展开后 render 优先于插槽
+    const header = host.querySelector<HTMLElement>('.u-ai-chat__tool-call .u-collapse__header')!
+    header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    await nextTick()
     expect(host.querySelector('.weather-view')).toBeTruthy()
     expect(host.querySelector('.slot-view')).toBeFalsy()
     unmount()
@@ -1170,7 +1234,7 @@ describe('UAiChat', () => {
     expect(
       host.querySelector('.u-ai-chat__input-clear-wrap')?.classList.contains('is-disabled')
     ).toBe(true)
-    expect(host.querySelector('.u-ai-chat__input-usage')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__usage-trigger')).toBeFalsy()
 
     chat.value?.send('你好')
     await vi.waitFor(() => {
@@ -1208,7 +1272,21 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('有 usage 时默认只显示总 token，tokenUsageDetail 追加缓存命中/未命中', async () => {
+  async function openUsagePanel(host: HTMLElement) {
+    const trigger = host.querySelector<HTMLElement>('.u-ai-chat__usage-trigger')
+    trigger?.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+    const panel = document.body.querySelector('.u-ai-chat__usage-panel')
+    const rows: Record<string, string> = {}
+    panel?.querySelectorAll('.u-ai-chat__usage-row').forEach((row) => {
+      const label = row.querySelector('.u-ai-chat__usage-label')?.textContent ?? ''
+      rows[label] = row.querySelector('.u-ai-chat__usage-value')?.textContent ?? ''
+    })
+    return rows
+  }
+
+  it('有 usage 时显示用量环，悬停弹出明细；tokenUsageDetail 追加缓存命中/未命中', async () => {
     const usageTransport: ChatTransport = (_req, handlers) => {
       handlers.onTextDelta('ok')
       handlers.onUsage?.({
@@ -1221,27 +1299,28 @@ describe('UAiChat', () => {
     }
 
     const compact = mountAiChat({ transport: usageTransport })
+    // 未收到 usage 时不渲染用量环
+    expect(compact.host.querySelector('.u-ai-chat__usage-trigger')).toBeFalsy()
     compact.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(compact.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe('总 token 12')
+      expect(compact.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    expect(compact.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain(
-      '缓存命中'
-    )
+    const compactRows = await openUsagePanel(compact.host)
+    expect(compactRows['总 token']).toBe('12')
+    expect(compactRows['输入']).toBe('10')
+    expect(compactRows['输出']).toBe('2')
+    expect(compactRows['缓存命中']).toBeUndefined()
     compact.unmount()
 
     const detail = mountAiChat({ transport: usageTransport, tokenUsageDetail: true })
     detail.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(detail.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe(
-        '总 token 12 · 缓存命中 4 · 缓存未命中 6'
-      )
+      expect(detail.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    const text = detail.host.querySelector('.u-ai-chat__input-usage')?.textContent ?? ''
-    expect(text).not.toContain('本次')
-    expect(text).not.toContain('累计')
-    expect(text).not.toContain('输入')
-    expect(text).not.toContain('输出')
+    const detailRows = await openUsagePanel(detail.host)
+    expect(detailRows['总 token']).toBe('12')
+    expect(detailRows['缓存命中']).toBe('4')
+    expect(detailRows['缓存未命中']).toBe('6')
     detail.unmount()
   })
 
@@ -1259,10 +1338,12 @@ describe('UAiChat', () => {
     const scaled = mountAiChat({ transport: scaledTransport, tokenUsageDetail: true })
     scaled.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(scaled.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe(
-        '总 token 1.5K · 缓存命中 1K · 缓存未命中 1M'
-      )
+      expect(scaled.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
+    const scaledRows = await openUsagePanel(scaled.host)
+    expect(scaledRows['总 token']).toBe('1.5K')
+    expect(scaledRows['缓存命中']).toBe('1K')
+    expect(scaledRows['缓存未命中']).toBe('1M')
     scaled.unmount()
 
     const noCacheTransport: ChatTransport = (_req, handlers) => {
@@ -1272,12 +1353,33 @@ describe('UAiChat', () => {
     const noCache = mountAiChat({ transport: noCacheTransport, tokenUsageDetail: true })
     noCache.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe('总 token 12')
+      expect(noCache.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain('缓存')
+    const noCacheRows = await openUsagePanel(noCache.host)
+    expect(noCacheRows['总 token']).toBe('12')
+    expect(Object.keys(noCacheRows).some((label) => label.includes('缓存'))).toBe(false)
     noCache.unmount()
   })
 
+  it('模型声明 contextWindow 时用量环按上下文占用填充，面板展示占比', async () => {
+    const usageTransport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('ok')
+      handlers.onUsage?.({ promptTokens: 600, completionTokens: 400, totalTokens: 1000 })
+    }
+    const models: ChatModelOption[] = [
+      { id: 'm1', label: 'M1', providerId: 'p1', contextWindow: 10000 }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport: usageTransport, models, model: 'm1' })
+    chat.value?.send('hi')
+    await vi.waitFor(() => {
+      const ring = host.querySelector('.u-ai-chat__usage-ring-value')
+      expect(ring?.getAttribute('stroke-dasharray')).toBe('10 100')
+    })
+    const rows = await openUsagePanel(host)
+    expect(rows['上下文占用']).toBe('1K / 10K · 10%')
+    unmount()
+  })
+
   const UNKNOWN_TOOL = 'totally-unknown-tool-xyz'
 
   function seedUnknownCall(init: Partial<ChatToolCall> = {}) {
@@ -1319,6 +1421,11 @@ describe('UAiChat', () => {
     expect(host.querySelector('.u-ai-chat__tool-call-name')?.classList.contains('u-shine')).toBe(
       true
     )
+    // 进行中默认折叠
+    expect(host.querySelector('.u-ai-chat__tool-call.is-active')).toBeFalsy()
+
+    // 手动展开可查看参数
+    await expandToolCard(host)
     expect(host.textContent).toContain('"q": "hi"')
 
     call.status = 'success'
@@ -1326,7 +1433,7 @@ describe('UAiChat', () => {
     await nextTick()
     assertGenericCard(host, 'success')
 
-    await expandToolCard(host)
+    // 用户已手动展开过，进入终态后保持展开
     expect(host.textContent).toContain('"ok": true')
     unmount()
   })

package/src/components/ai-chat/ai-chat.vue

@@ -53,6 +53,7 @@
         :max-attachment-size="maxAttachmentSize"
         :clearable="clearable"
         :token-usage="tokenUsage"
+        :last-request-usage="lastRequestUsage"
         :token-usage-detail="tokenUsageDetail"
         @send="handleSend"
         @abort="abort"
@@ -133,6 +134,7 @@ const {
   jobs,
   tokenUsage,
   lastTurnUsage,
+  lastRequestUsage,
   pendingApprovals,
   pendingQuestion,
   send,

package/src/components/ai-chat/chat-input.vue

@@ -46,14 +46,48 @@
             </template>
           </UPopConfirm>
         </span>
-
-        <span v-if="tokenUsage" :class="cls.e('input-usage')" :title="usageText">
-          {{ usageText }}
-        </span>
       </div>
 
-      <!-- 右簇：模型/推理选择 → 发送或停止（互斥） -->
+      <!-- 右簇：token 用量环 → 模型/推理选择 → 发送或停止（互斥） -->
       <div :class="cls.e('input-toolbar-right')">
+        <UDropdown
+          v-if="tokenUsage"
+          width="auto"
+          min-width="200px"
+          :content-class="cls.e('usage-panel')"
+        >
+          <template #trigger>
+            <button type="button" :class="cls.e('usage-trigger')" aria-label="Token 用量">
+              <svg :class="cls.e('usage-ring')" viewBox="0 0 36 36">
+                <circle :class="cls.e('usage-ring-track')" cx="18" cy="18" r="15.5" />
+                <circle
+                  :class="cls.e('usage-ring-value')"
+                  cx="18"
+                  cy="18"
+                  r="15.5"
+                  pathLength="100"
+                  transform="rotate(-90 18 18)"
+                  :stroke-dasharray="`${contextPercent ?? 0} 100`"
+                  :stroke-linecap="contextPercent ? 'round' : undefined"
+                />
+              </svg>
+            </button>
+          </template>
+
+          <template #content>
+            <div :class="cls.e('usage-list')">
+              <div v-if="contextText" :class="cls.e('usage-row')">
+                <span :class="cls.e('usage-label')">上下文占用</span>
+                <span :class="cls.e('usage-value')">{{ contextText }}</span>
+              </div>
+              <div v-for="row in usageRows" :key="row.label" :class="cls.e('usage-row')">
+                <span :class="cls.e('usage-label')">{{ row.label }}</span>
+                <span :class="cls.e('usage-value')">{{ row.value }}</span>
+              </div>
+            </div>
+          </template>
+        </UDropdown>
+
         <ModelPicker
           v-if="models?.length"
           v-model:model="model"
@@ -89,7 +123,7 @@
 </template>
 
 <script lang="ts" setup>
-import { UButton, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'
+import { UButton, UDropdown, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'
 import { Attach, Clear, Close, Up } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'
@@ -116,6 +150,8 @@ const props = defineProps<{
   clearable?: boolean
   /** 会话累计 token；无 usage 时为 null，不展示 */
   tokenUsage?: ChatTokenUsage | null
+  /** 最近一次单次请求的 token（未累计）；配合模型 contextWindow 计算用量环占比 */
+  lastRequestUsage?: ChatTokenUsage | null
   /** 是否展示缓存命中 / 未命中（默认只显示总 token） */
   tokenUsageDetail?: boolean
 }>()
@@ -159,20 +195,52 @@ const formatTokenCount = (n: number) => {
   return scaled(n / 1_000_000, 'M')
 }
 
-/** 会话累计：总 token；明细再拼有数据的缓存项，缺字段不写 0 */
-const usageText = computed(() => {
+/** 百分比：最多 1 位小数，整数不写 `.0` */
+const formatPercent = (p: number) => {
+  const rounded = Math.round(p * 10) / 10
+  return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}%`
+}
+
+/** 当前模型声明的上下文窗口；未声明则用量环不填充、面板不显示占用 */
+const contextWindow = computed(() => {
+  return props.models?.find((m) => m.id === model.value)?.contextWindow
+})
+
+/** 上下文占用百分比：最近一次请求总 token / 窗口上限；缺数据时为 null */
+const contextPercent = computed(() => {
+  const win = contextWindow.value
+  const total = props.lastRequestUsage?.totalTokens
+  if (!win || total == null) return null
+  return Math.min(100, (total / win) * 100)
+})
+
+/** 面板占用行文案：1.5K / 128K · 1.2% */
+const contextText = computed(() => {
+  const percent = contextPercent.value
+  const win = contextWindow.value
+  const total = props.lastRequestUsage?.totalTokens
+  if (percent == null || !win || total == null) return ''
+  return `${formatTokenCount(total)} / ${formatTokenCount(win)} · ${formatPercent(percent)}`
+})
+
+/** 明细面板行：总 / 输入 / 输出；明细开关下再拼有数据的缓存项，缺字段不写 0 */
+const usageRows = computed(() => {
   const usage = props.tokenUsage
-  if (!usage) return ''
-  const parts = [`总 token ${formatTokenCount(usage.totalTokens)}`]
+  if (!usage) return []
+  const rows = [
+    { label: '总 token', value: formatTokenCount(usage.totalTokens) },
+    { label: '输入', value: formatTokenCount(usage.promptTokens) },
+    { label: '输出', value: formatTokenCount(usage.completionTokens) }
+  ]
   if (props.tokenUsageDetail) {
     if (usage.cacheHitTokens != null) {
-      parts.push(`缓存命中 ${formatTokenCount(usage.cacheHitTokens)}`)
+      rows.push({ label: '缓存命中', value: formatTokenCount(usage.cacheHitTokens) })
     }
     if (usage.cacheMissTokens != null) {
-      parts.push(`缓存未命中 ${formatTokenCount(usage.cacheMissTokens)}`)
+      rows.push({ label: '缓存未命中', value: formatTokenCount(usage.cacheMissTokens) })
     }
   }
-  return parts.join(' · ')
+  return rows
 })
 
 /** 生成中提示用户消息将进入队列 */

package/src/components/ai-chat/format-duration.ts

@@ -0,0 +1,8 @@
+/** 格式化工作时长：整秒显示，≥60s 显示 Xm Ys */
+export const formatDuration = (ms: number): string => {
+  const seconds = Math.round(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  const rest = seconds % 60
+  return rest ? `${minutes}m ${rest}s` : `${minutes}m`
+}

package/src/components/ai-chat/message-item.vue

@@ -32,6 +32,10 @@
           <span :class="[cls.e('reasoning-title'), isThinking && 'u-shine']">
             {{ isThinking ? '思考中…' : '思考过程' }}
           </span>
+          <!-- 折叠态在头部右侧滚动展示最新一行思考 -->
+          <span v-if="latestReasoningLine" :class="cls.e('reasoning-line')">
+            {{ latestReasoningLine }}
+          </span>
           <UIcon :class="cls.e('reasoning-chevron')"><ArrowRight /></UIcon>
         </div>
         <!-- 折叠时完全卸载内容 DOM：思考文本可能很长，常驻挂载浪费内存与渲染成本 -->
@@ -69,6 +73,9 @@
       </div>
 
       <div v-if="showActions" :class="cls.e('message-actions')">
+        <span v-if="duration != null" :class="cls.e('message-duration')">
+          用时 {{ formatDuration(duration) }}
+        </span>
         <UButton
           size="small"
           plain
@@ -103,6 +110,7 @@ import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch
 
 import type { ChatMessage } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { formatDuration } from './format-duration'
 import ToolCallCard from './tool-call.vue'
 
 defineOptions({ name: 'UAiChatMessageItem' })
@@ -111,6 +119,8 @@ const props = defineProps<{
   message: ChatMessage
   /** 是否为最后一条可见消息（决定是否显示重新生成） */
   isLast: boolean
+  /** 本轮总用时（ms；仅 live 轮次有，历史回放无计时数据） */
+  duration?: number
   /** 透传给 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
 }>()
@@ -127,12 +137,24 @@ const isStreaming = computed(() => props.message.status === 'streaming')
 /** 思考中：流式且正文还未开始输出 */
 const isThinking = computed(() => isStreaming.value && !props.message.content)
 
-const reasoningExpanded = ref(true)
+/** 思考默认折叠（含流式进行中），用户点击头部展开 */
+const reasoningExpanded = ref(false)
+
+/** 折叠时头部右侧滚动展示的最新一行思考：取最后一行非空文本，随流式输出持续刷新 */
+const latestReasoningLine = computed(() => {
+  if (!isThinking.value || reasoningExpanded.value) return ''
+  const lines = (props.message.reasoning ?? '').split('\n')
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i]?.trim()
+    if (line) return line
+  }
+  return ''
+})
 
 /** 思考区吸附底部：用户在思考区内上滚时取消吸附，回到底部后恢复 */
 const reasoningStick = ref(true)
 
-/** 思考内容滚动区：流式输出时吸附底部，始终展示最新思考 */
+/** 思考内容滚动区：展开且流式输出时吸附底部，始终展示最新思考 */
 const reasoningScrollRef = useTemplateRef<InstanceType<typeof UScroll>>('reasoningScrollRef')
 
 const toggleReasoning = async () => {
@@ -152,20 +174,6 @@ const handleReasoningScroll = (position: Required<ScrollPosition>) => {
   if (position.sh - position.ch - position.y < 8) reasoningStick.value = true
 }
 
-// 流式结束后自动折叠思考过程；immediate 保证终态消息重挂载（过程块展开/收起、载入历史会话）时呈折叠态
-watch(
-  () => props.message.status,
-  (status) => {
-    if (status === 'streaming') {
-      reasoningExpanded.value = true
-      reasoningStick.value = true
-    } else if (status) {
-      reasoningExpanded.value = false
-    }
-  },
-  { immediate: true }
-)
-
 watch(
   () => props.message.reasoning,
   async () => {

package/src/components/ai-chat/message-list.vue

@@ -2,8 +2,8 @@
   <div :class="cls.e('list-wrap')">
     <UScroll
       :class="cls.e('list')"
+      :content-class="cls.e('list-content')"
       ref="scrollRef"
-      always
       @scroll="handleScroll"
       @wheel.passive="handleWheel"
     >
@@ -40,6 +40,7 @@
           v-if="turn.answerMsg"
           :message="turn.answerMsg"
           :is-last="turn.isLast"
+          :duration="turnDurations.get(turn.key)"
           :renderer-props="rendererProps"
           @respond="(id, approved) => emit('respond', id, approved)"
           @regenerate="emit('regenerate')"
@@ -49,7 +50,13 @@
       <!-- 工作中：活体球从输入框上方跳到最新会话下面；结束停留后再跳回 -->
       <div v-if="showWorking" :class="[cls.e('working'), bem.is('leaving', workingLeaving)]">
         <UAiOrb ref="workingOrb" :size="ORB_SIZE" :status="workingOrbStatus" />
-        <span v-if="running" :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+        <template v-if="running">
+          <span :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+          <span :class="cls.e('working-time')">{{ formatDuration(elapsedMs) }}</span>
+        </template>
+        <span v-else-if="lastTurnDuration != null" :class="cls.e('working-time')">
+          用时 {{ formatDuration(lastTurnDuration) }}
+        </span>
       </div>
     </UScroll>
 
@@ -83,9 +90,14 @@
 
     <!-- 用户上翻浏览时悬浮入口：一键回到最新消息 -->
     <Transition :name="cls.em('to-latest', 'fade')">
-      <button v-if="showToLatest" type="button" :class="cls.e('to-latest')" @click="scrollToLatest">
+      <button
+        v-if="showToLatest"
+        type="button"
+        :class="cls.e('to-latest')"
+        title="回到最新"
+        @click="scrollToLatest"
+      >
         <UIcon><ArrowDown /></UIcon>
-        <span>最新消息</span>
       </button>
     </Transition>
   </div>
@@ -111,6 +123,7 @@ import type { ChatMessage } from '../../chat/types'
 import type { AiOrbExposed, AiOrbReaction, AiOrbStatus } from '../../types/ai-orb'
 import UAiOrb from '../ai-orb/ai-orb.vue'
 import { AiChatDIKey } from './di'
+import { formatDuration } from './format-duration'
 import MessageItem from './message-item.vue'
 import TurnProcess from './turn-process.vue'
 
@@ -258,6 +271,26 @@ const clearJumpTimers = () => {
   clearTimeout(jumpTimer)
 }
 
+/** 工作计时的起算时间戳（running 升起时记录） */
+let workStartAt = 0
+/** 进行中的已逝时长（100ms 跳动刷新） */
+const elapsedMs = ref(0)
+let tickTimer: ReturnType<typeof setInterval> | undefined
+
+/** 各轮次总用时（key 同 turns；仅 live 轮次有，历史回放无计时数据） */
+const turnDurations = shallowRef(new Map<string, number>())
+
+const stopTick = () => {
+  clearInterval(tickTimer)
+  tickTimer = undefined
+}
+
+/** 收尾停留期间展示的末轮总用时 */
+const lastTurnDuration = computed(() => {
+  const last = turns.value[turns.value.length - 1]
+  return last ? turnDurations.value.get(last.key) : undefined
+})
+
 /** 列表末尾的工作球：生成中 / 收尾停留 / 跳回过渡 */
 const showWorking = computed(() => !!(props.running || finishing.value || workingLeaving.value))
 /** 输入框上方的空闲欢迎：含工作开始时的缩小离开帧 */
@@ -304,6 +337,13 @@ watch(
     if (running) {
       // 工作开始：立即从输入框上方跳到列表，无停留
       clearJumpTimers()
+      // 工作计时开始：100ms 跳动刷新已逝时长
+      workStartAt = Date.now()
+      elapsedMs.value = 0
+      stopTick()
+      tickTimer = setInterval(() => {
+        elapsedMs.value = Date.now() - workStartAt
+      }, 100)
       const idleWasVisible = !prev && !finishing.value && !workingLeaving.value
       finishing.value = false
       workingLeaving.value = false
@@ -320,6 +360,15 @@ watch(
     }
     if (!prev) return
 
+    stopTick()
+    // 记录本轮总用时（key 同 turns：regenerate 同 key 覆盖，队列接续各自计时）
+    const lastTurn = turns.value[turns.value.length - 1]
+    if (lastTurn) {
+      const next = new Map(turnDurations.value)
+      next.set(lastTurn.key, Date.now() - workStartAt)
+      turnDurations.value = next
+    }
+
     // 清除会话后列表已空：跳过结束停留，立刻回到欢迎区
     if (visibleMessages.value.length === 0) {
       finishing.value = false
@@ -359,6 +408,7 @@ watch(
   (len) => {
     if (len > 0) return
     clearJumpTimers()
+    turnDurations.value = new Map()
     finishing.value = false
     workingLeaving.value = false
     idleLeaving.value = false
@@ -379,6 +429,7 @@ watch(
 onBeforeUnmount(() => {
   stopWelcomeRotation()
   clearJumpTimers()
+  stopTick()
 })
 
 const scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()
@@ -387,7 +438,7 @@ const stickToBottom = ref(true)
 /** 上一次滚动位置：用于区分用户上翻与自动吸底触发的 scroll 事件 */
 let lastScrollY = 0
 
-/** 上翻阅读时展示「最新消息」悬浮按钮 */
+/** 上翻阅读时展示回到底部的悬浮按钮 */
 const showToLatest = computed(() => !stickToBottom.value && visibleMessages.value.length > 0)
 
 const handleScroll = (position: Required<ScrollPosition>) => {