Agent-System-Frontend/src/components/ProcessTimeline.tsx

// 执行记录按工作动作分组；展开状态由调用方控制。
import type { ReactNode } from 'react'
import { Collapsible, ToolBlock } from '@ui'
import type { Part } from '../contracts'
import { formatDuration, humanSize } from '../messageparts'
import { timelineEntries, toolGroupLabel, type ToolGroupItem } from '../toolkind'

export function ProcessTimeline({ parts, live, idKey, renderPart }: {
  parts: Part[]
  live: boolean
  idKey: string
  renderPart: (part: Part, liveText: boolean) => ReactNode
}) {
  const rows = timelineEntries(parts, live)
  return (
    <div className="tl">
      {rows.map((row, i) => {
        if (row.kind === 'thinking') {
          return row.text && <div className="tl-thinking" key={`${idKey}:th:${i}`}>
            <span className="tl-thinking-label">思考过程</span>
            <div className="tl-thinking-body">{row.text}</div>
          </div>
        }
        if (row.kind === 'text') {
          return <div className="part" key={`${idKey}:tx:${i}`}>{renderPart({ type: 'text', text: row.text }, false)}</div>
        }
        if (row.kind === 'check') {
          const text = row.passed ? '终轮检查通过' : `终轮检查未通过：${row.reason}`
          return <div className="tl-check" key={`${idKey}:ck:${i}`}>{text}</div>
        }
        if (row.kind === 'toolblock') {
          return <ToolCallBlock key={`${idKey}:tb:${i}`} item={row.item} />
        }
        if (row.kind === 'tools') {
          const running = row.items.some(it => it.running)
          return (
            <div className="tl-tools" key={`${idKey}:tl:${i}`}>
              <div className={`tl-tools-head${running ? ' mk-sweep' : ''}`}>{toolGroupLabel(row.toolKind, row.items.length, running)}</div>
              <ul className="tl-tools-list">
                {row.items.map((it, j) => (
                  <li key={j}>
                    <span className="tl-tools-name">{it.headline}</span>
                    {it.status === 'error' && <span className="status-error">失败</span>}
                    {it.summary && <span className="tl-tools-sum">{it.summary}</span>}
                    {(it.arguments || it.output) && <Collapsible id={`tool-record:${idKey}:${it.id}:${j}`}
                      triggerClassName="tl-tool-detail" trigger={<span>查看记录 ▸</span>}>
                      {it.arguments && <pre className="tool-preview">{it.arguments}</pre>}
                      {it.output && <pre className="tool-preview">{it.output}</pre>}
                    </Collapsible>}
                  </li>
                ))}
              </ul>
            </div>
          )
        }
        return <div className="part" key={`${idKey}:ot:${i}`}>{renderPart(row.part, false)}</div>
      })}
    </div>
  )
}

function sizeLabel(n: number): string {
  if (n < 1024) return `${n} 字符`
  return humanSize(n)
}

function ToolCallBlock({ item }: { item: ToolGroupItem }) {
  const composing = item.phase === 'composing'
  const dur = !item.running ? formatDuration(item.durationMs) : ''
  const detail = composing ? undefined : (dur ? `${item.headline} · ${dur}` : item.headline)
  return (
    <div className="tl-toolblock">
      <ToolBlock
        toolId={item.id}
        name={item.name}
        detail={detail}
        running={item.running}
        status={item.status}
        statusText={composing ? `编写中 · ${sizeLabel(item.arguments?.length ?? 0)}` : undefined}
        statusDetail={item.summary}
        autoCollapseOnComplete
      >
        {item.arguments && <pre className="tool-preview">{item.arguments}</pre>}
        {item.output && <pre className="tool-preview">{item.output}</pre>}
      </ToolBlock>
    </div>
  )
}