feat: 优化 AI 回合头像区域折叠入口

apps/buddy/src/modules/tasks/widgets/transcript/BuddyChatAgentIdentity.vue

@@ -4,14 +4,15 @@ import { useBuddyI18n } from '@/i18n/buddyI18n'
 import { BRAND_ASSET_URLS } from '@/shared/branding/brandAssets'
 
 const props = defineProps<{
+  as?: 'header' | 'span'
   language: BuddyLocale
 }>()
 
 const { t } = useBuddyI18n(() => props.language)
 </script>
 
 <template>
-  <header class="buddy-chat-agent-identity">
+  <component :is="props.as ?? 'header'" class="buddy-chat-agent-identity">
     <span class="buddy-chat-agent-identity__avatar">
       <img
         :src="BRAND_ASSET_URLS.chatAvatar"
@@ -22,7 +23,7 @@ const { t } = useBuddyI18n(() => props.language)
     <span class="buddy-chat-agent-identity__name">
       {{ t('desktop.chat.agentName') }}
     </span>
-  </header>
+  </component>
 </template>
 
 <style scoped lang="scss">

apps/buddy/src/modules/tasks/widgets/transcript/BuddyChatAgentTurn.vue

@@ -3,9 +3,11 @@ import type { ChatMessageBranchNavigator } from '../../model/transcript/chatMess
 
 import type { ChatAgentTurn } from '../../model/transcript/chatStreamingMessage'
 import type { BuddyLocale } from '@/i18n/buddyI18n'
-import { computed, useTemplateRef } from 'vue'
+import { ChevronRight20Regular } from '@vicons/fluent'
+import { computed, shallowRef, useId, useTemplateRef, watch } from 'vue'
 
 import { useBuddyI18n } from '@/i18n/buddyI18n'
+import DesktopIcon from '@/shared/ui/icon/DesktopIcon.vue'
 import {
   resolveChatAgentTurnFailurePresentation,
   resolveChatAgentTurnNotice,
@@ -35,12 +37,21 @@ const { t } = useBuddyI18n(() => props.language)
 const flow = useTemplateRef('flow')
 defineExpose({ revealActivity: (nodeId: string) => flow.value?.revealActivity(nodeId) })
 const isActive = computed(() => props.turn.status === 'queued' || props.turn.status === 'running')
+const collapsed = shallowRef(props.turn.status === 'completed')
+const disclosureId = useId()
+watch(() => [isActive.value, props.turn.status === 'completed'] as const, ([active, completed]) => {
+  if (active)
+    collapsed.value = false
+  else if (completed)
+    collapsed.value = true
+})
 const duration = computed(() => formatChatRunDuration(
   props.turn.startedAt,
   props.turn.completedAt,
   Date.now(),
 ))
 const statusLabel = computed(() => t(`run.status.${props.turn.status}`))
+const showTopProcessToggle = computed(() => props.showIdentity !== false && props.showOutcome !== false && props.turn.nodes.length > 0)
 const notice = computed(() => resolveChatAgentTurnNotice(
   props.turn.status,
   props.turn.failureMessage ?? null,
@@ -84,7 +95,23 @@ const actionCopyText = computed(() => resultNoticeText.value ?? statusLabel.valu
     class="buddy-chat-agent-turn"
     :class="`is-${turn.status}`"
   >
-    <div v-if="showIdentity !== false" class="buddy-chat-agent-turn__heading">
+    <button
+      v-if="showTopProcessToggle"
+      class="buddy-chat-agent-turn__heading buddy-chat-agent-turn__process-toggle"
+      type="button"
+      :aria-expanded="!collapsed"
+      :aria-controls="disclosureId"
+      :disabled="isActive"
+      @click="collapsed = !collapsed"
+    >
+      <BuddyChatAgentIdentity :as="'span'" :language="language" />
+      <span class="buddy-chat-agent-turn__status">
+        <span class="buddy-chat-agent-turn__status-label">{{ statusLabel }}</span>
+        <span class="buddy-chat-agent-turn__duration">{{ duration }}</span>
+        <DesktopIcon :component="ChevronRight20Regular" class="buddy-chat-agent-turn__process-chevron" :class="{ 'is-open': !collapsed }" aria-hidden="true" />
+      </span>
+    </button>
+    <div v-else-if="showIdentity !== false" class="buddy-chat-agent-turn__heading">
       <BuddyChatAgentIdentity :language="language" />
       <div v-if="!isActive && showOutcome !== false" class="buddy-chat-agent-turn__status">
         <span class="buddy-chat-agent-turn__status-label">{{ statusLabel }}</span>
@@ -94,9 +121,17 @@ const actionCopyText = computed(() => resultNoticeText.value ?? statusLabel.valu
     <BuddyChatAgentTurnFlow
       v-if="turn.nodes.length || failureDetailText"
       ref="flow"
+      :active="isActive"
+      :collapsed="collapsed"
+      :completed="turn.status === 'completed'"
+      :disclosure-id="disclosureId"
+      :duration="duration"
       :failure-detail-text="failureDetailText"
       :language="language"
       :nodes="turn.nodes"
+      :status-label="statusLabel"
+      :top-toggle="showTopProcessToggle"
+      @toggle="collapsed = !collapsed"
     />
     <p
       v-if="resultNoticeText"
@@ -139,6 +174,30 @@ const actionCopyText = computed(() => resultNoticeText.value ?? statusLabel.valu
   gap: 12px;
 }
 
+.buddy-chat-agent-turn__process-toggle {
+  width: 100%;
+  max-width: none;
+  padding: 0 0 8px;
+  border: 0;
+  border-bottom: 0.5px solid color-mix(in srgb, var(--buddy-border-subtle) 70%, transparent);
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 1;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--buddy-focus-ring);
+    outline-offset: 3px;
+  }
+}
+
 .buddy-chat-agent-turn__status {
   display: inline-flex;
   flex: none;
@@ -153,6 +212,19 @@ const actionCopyText = computed(() => resultNoticeText.value ?? statusLabel.valu
   font-variant-numeric: tabular-nums;
 }
 
+.buddy-chat-agent-turn__process-chevron {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  color: var(--buddy-text-muted);
+  opacity: 0.7;
+  transition: transform 120ms ease;
+
+  &.is-open {
+    transform: rotate(90deg);
+  }
+}
+
 .buddy-chat-agent-turn.is-failed .buddy-chat-agent-turn__status {
   color: var(--buddy-chat-danger-color);
 }
@@ -182,7 +254,8 @@ const actionCopyText = computed(() => resultNoticeText.value ?? statusLabel.valu
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .buddy-chat-agent-turn__actions {
+  .buddy-chat-agent-turn__actions,
+  .buddy-chat-agent-turn__process-chevron {
     transition: none;
   }
 }

apps/buddy/src/modules/tasks/widgets/transcript/BuddyChatAgentTurnFlow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ChatAgentTurnNode } from '../../model/transcript/chatStreamingMessage'
 import type { BuddyLocale } from '@/i18n/buddyI18n'
-import { PanelRight20Regular } from '@vicons/fluent'
+import { ChevronRight20Regular, PanelRight20Regular, Thinking20Regular } from '@vicons/fluent'
 import { computed, shallowReactive } from 'vue'
 import { useBuddyI18n } from '@/i18n/buddyI18n'
 import DesktopIcon from '@/shared/ui/icon/DesktopIcon.vue'
@@ -12,10 +12,18 @@ import BuddyChatNarrationBody from './BuddyChatNarrationBody.vue'
 import { useChatActivityNavigation } from './useChatActivityNavigation'
 
 const props = defineProps<{
+  active: boolean
+  collapsed: boolean
+  completed: boolean
+  disclosureId: string
+  duration: string
   failureDetailText: string | null
   language: BuddyLocale
   nodes: ReadonlyArray<ChatAgentTurnNode>
+  statusLabel: string
+  topToggle: boolean
 }>()
+const emit = defineEmits<{ toggle: [] }>()
 
 const { t } = useBuddyI18n(() => props.language)
 const rowProjector = createChatAgentActivityProjector()
@@ -24,6 +32,11 @@ function toggleEntry(id: string) {
   openEntries.set(id, !openEntries.get(id))
 }
 const rows = computed(() => rowProjector.project(props.nodes))
+const summary = computed(() => props.active
+  ? t('desktop.chat.processReasoningRunning')
+  : props.completed
+    ? `${t('desktop.chat.processReasoningDone')} · ${props.duration}`
+    : props.statusLabel)
 const navigation = useChatActivityNavigation()
 function revealActivity(nodeId: string) {
   const group = rows.value.find(row => row.kind === 'activity-group' && row.nodes.some(node => node.id === nodeId))
@@ -35,31 +48,46 @@ defineExpose({ revealActivity })
 
 <template>
   <div class="buddy-chat-agent-turn__flow">
-    <template v-for="row in rows" :key="row.id">
-      <BuddyChatActivityGroup
-        v-if="row.kind === 'activity-group'"
-        :ref="view => navigation.register(row.id, view)"
-        :group="row"
-        :language="language"
-        :open-entries="openEntries"
-        @toggle-entry="toggleEntry"
-        @open-entry="openEntries.set($event, true)"
-      />
-      <BuddyChatCompactionRow
-        v-else-if="row.kind === 'compaction' && row.status !== 'running'"
-        :language="language"
-        :node="row"
-      />
-      <BuddyChatNarrationBody
-        v-else-if="row.kind === 'text'"
-        :language="language"
-        :text="row.text"
-      />
-      <p v-else-if="row.kind === 'panel'" class="buddy-chat-agent-turn__panel-operation" data-testid="context-panel-operation">
-        <DesktopIcon :component="PanelRight20Regular" />
-        <span>{{ t(row.actor === 'harness' ? 'desktop.chat.panelActorSystem' : 'desktop.chat.panelActorUser') }} · {{ t(row.action === 'open' ? 'desktop.chat.panelOpened' : 'desktop.chat.panelClosed') }}</span>
-      </p>
-    </template>
+    <button
+      v-if="!topToggle && rows.length"
+      class="buddy-chat-agent-turn__process-toggle buddy-chat-activity-row"
+      type="button"
+      :aria-expanded="!collapsed"
+      :aria-controls="disclosureId"
+      :disabled="active"
+      @click="emit('toggle')"
+    >
+      <DesktopIcon :component="Thinking20Regular" class="buddy-chat-activity-row__icon" aria-hidden="true" />
+      <span class="buddy-chat-activity-row__label">{{ summary }}</span>
+      <DesktopIcon :component="ChevronRight20Regular" class="buddy-chat-activity-row__chevron" :class="{ 'is-open': !collapsed }" aria-hidden="true" />
+    </button>
+    <div v-show="!collapsed" :id="disclosureId" class="buddy-chat-agent-turn__process-content">
+      <template v-for="row in rows" :key="row.id">
+        <BuddyChatActivityGroup
+          v-if="row.kind === 'activity-group'"
+          :ref="view => navigation.register(row.id, view)"
+          :group="row"
+          :language="language"
+          :open-entries="openEntries"
+          @toggle-entry="toggleEntry"
+          @open-entry="openEntries.set($event, true)"
+        />
+        <BuddyChatCompactionRow
+          v-else-if="row.kind === 'compaction' && row.status !== 'running'"
+          :language="language"
+          :node="row"
+        />
+        <BuddyChatNarrationBody
+          v-else-if="row.kind === 'text'"
+          :language="language"
+          :text="row.text"
+        />
+        <p v-else-if="row.kind === 'panel'" class="buddy-chat-agent-turn__panel-operation" data-testid="context-panel-operation">
+          <DesktopIcon :component="PanelRight20Regular" />
+          <span>{{ t(row.actor === 'harness' ? 'desktop.chat.panelActorSystem' : 'desktop.chat.panelActorUser') }} · {{ t(row.action === 'open' ? 'desktop.chat.panelOpened' : 'desktop.chat.panelClosed') }}</span>
+        </p>
+      </template>
+    </div>
     <p v-if="failureDetailText" class="buddy-chat-agent-turn__failure-detail">
       <span>{{ t('desktop.chat.failureDetail') }}</span>
       {{ failureDetailText }}
@@ -75,6 +103,33 @@ defineExpose({ revealActivity })
   margin-top: var(--buddy-chat-gap-block);
 }
 
+.buddy-chat-agent-turn__process-toggle {
+  display: inline-flex;
+  width: 100%;
+  max-width: none;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  padding-inline: 0;
+  padding-bottom: 8px;
+  border: 0;
+  border-bottom: 0.5px solid color-mix(in srgb, var(--buddy-border-subtle) 70%, transparent);
+  border-radius: 0;
+  color: var(--buddy-chat-process-color);
+  text-align: start;
+}
+
+.buddy-chat-agent-turn__process-toggle:disabled {
+  opacity: 1;
+}
+
+.buddy-chat-agent-turn__process-content {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  padding-top: 6px;
+}
+
 .buddy-chat-agent-turn__failure-detail {
   margin: 0;
   color: var(--buddy-chat-meta-color);

apps/buddy/src/modules/tasks/widgets/transcript/__tests__/BuddyChatActivities.spec.ts

@@ -54,6 +54,31 @@ describe('activity disclosure', () => {
     expect(root.querySelector('.buddy-chat-tool-details')).toBe(details)
   })
 
+  it('collapses the complete process when a turn completes and keeps it visible while running', async () => {
+    const { root, turn } = mountTurn([
+      { id: 'thought', contentIndex: 0, kind: 'reasoning', status: 'completed', text: 'Reviewing the task' },
+      readTool('one', 'completed'),
+      { id: 'commentary', kind: 'text', messageId: 'commentary', text: 'I have finished checking.' },
+    ])
+    const toggle = root.querySelector<HTMLButtonElement>('.buddy-chat-agent-turn__process-toggle')!
+    const content = root.querySelector<HTMLElement>('.buddy-chat-agent-turn__process-content')!
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(toggle.disabled).toBe(true)
+    expect(content.style.display).not.toBe('none')
+
+    turn.value = { ...turn.value, status: 'completed', completedAt: '2026-09-09T00:00:10Z' }
+    await nextTick()
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(toggle.disabled).toBe(false)
+    expect(content.style.display).toBe('none')
+
+    toggle.click()
+    await nextTick()
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(content.style.display).not.toBe('none')
+    expect(root.textContent).toContain('I have finished checking.')
+  })
+
   it('finishes a mixed group without borrowing progress and avoids duplicate loaders during another call', async () => {
     const first = readTool('one', 'running')
     const second = readTool('two', 'completed')
@@ -181,7 +206,7 @@ describe('activity disclosure', () => {
   it('shows a single finished tool directly and retains its open output when a group forms', async () => {
     const node = readTool('one', 'completed')
     const { root, turn } = mountTurn([node], 'completed')
-    expect(root.querySelectorAll('button[aria-expanded]')).toHaveLength(1)
+    expect(root.querySelectorAll('.buddy-chat-tool__header[aria-expanded]')).toHaveLength(1)
     root.querySelector<HTMLButtonElement>('.buddy-chat-tool__header')!.click()
     await nextTick()
     const tool = root.querySelector('.buddy-chat-tool')