Function ToolRunDetail

ai-code-studio/src/components/ToolWorkbenchPanel.tsx:214–293

({ call }: { call: ToolCall | null })

}

function ToolRunDetail({ call }: { call: ToolCall | null }) {
  if (!call) {
    return (
      <div className="rounded-2xl border border-dashed border-[#E4DACD] px-4 py-8 text-[13px] text-[#978C7E]">
        选择一次工具调用后，这里会显示输入、结果和关联文件。
      </div>
    );
  }

  const files = Array.isArray(call.diff?.files) ? call.diff?.files || [] : [];

  return (
    <div className="space-y-4">
      <div className="rounded-2xl border border-[#ECE2D6] bg-[#FCFAF6] p-4">
        <div className="flex items-start justify-between gap-4">
          <div>
            <div className="text-[12px] text-[#8A7F70]">工具调用</div>
            <div className="mt-1 text-[15px] font-semibold text-[#241F17]">
              {call.title || call.name || '工具'}
            </div>
          </div>
          <span className={['rounded-full border px-2.5 py-1 text-[11px]', toolStatusTone(call.status)].join(' ')}>
            {toolStatusLabel(call.status)}
          </span>
        </div>
        <div className="mt-3 grid gap-3 md:grid-cols-2 text-[12px] text-[#7B6F61]">
          <div>
            <div className="text-[#8A7F70]">开始时间</div>
            <div className="mt-1 text-[#241F17]">{formatTimestamp(call.startedAt || null) || '未知'}</div>
          </div>
          <div>
            <div className="text-[#8A7F70]">结束时间</div>
            <div className="mt-1 text-[#241F17]">{formatTimestamp(call.completedAt || null) || '未知'}</div>
          </div>
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <div className="rounded-2xl border border-[#ECE2D6] bg-white/80 p-4">
          <div className="mb-3 text-[12px] font-semibold uppercase tracking-[0.18em] text-[#8C8173]">输入摘要</div>
          <pre className="max-h-[320px] overflow-auto whitespace-pre-wrap break-words rounded-2xl bg-[#FBF8F3] p-4 font-mono text-[12px] leading-6 text-[#5B5145]">
            {trimText(call.inputPreview, '这次工具没有可展示的输入摘要。')}
          </pre>
        </div>

        <div className="rounded-2xl border border-[#ECE2D6] bg-white/80 p-4">
          <div className="mb-3 text-[12px] font-semibold uppercase tracking-[0.18em] text-[#8C8173]">结果摘要</div>
          <pre className="max-h-[320px] overflow-auto whitespace-pre-wrap break-words rounded-2xl bg-[#FBF8F3] p-4 font-mono text-[12px] leading-6 text-[#5B5145]">
            {trimText(call.resultPreview, '这次工具没有文本结果摘要。')}
          </pre>
        </div>
      </div>

      <div className="rounded-2xl border border-[#ECE2D6] bg-white/80 p-4">
        <div className="mb-3 text-[12px] font-semibold uppercase tracking-[0.18em] text-[#8C8173]">关联文件</div>
        {files.length > 0 ? (
          <div className="space-y-3">
            {files.map((file: DiffFile) => (