Function ToolCard

ai-code-studio/src/components/ConversationPane.tsx:180–287

({
  entry,
}: {
  entry: TranscriptEntry & { feedType: 'tool_use' | 'tool_result' };
})

}

function ToolCard({
  entry,
}: {
  entry: TranscriptEntry & { feedType: 'tool_use' | 'tool_result' };
}) {
  const diffFiles = ('diff' in entry ? entry.diff?.files : undefined) || [];
  const status = entry.status || (entry.isError ? 'error' : 'success');
  const name = entry.toolName || entry.title || '';
  const isBash = isBashTool(name);
  const isFile = isFileTool(name);
  const hasDiff = diffFiles.length > 0;
  const content = trimText(entry.content);

  if (entry.feedType === 'tool_use') {
    return (
      <details className="group max-w-[88%]">
        <summary className="flex cursor-pointer list-none items-center gap-2 rounded-xl border border-[#E7DFD3] bg-[#F9F6F1] px-3 py-2 text-[13px] text-[#5C5247] transition-colors hover:bg-[#F4EEE4]">
          <span>{toolIcon(name)}</span>
          <span className="font-medium">{toolLabel(name)}</span>
          <ChevronRight className="ml-auto h-3.5 w-3.5 text-[#A99D8D] transition-transform group-open:rotate-90" />
        </summary>
        {content ? (
          <div className="mt-1 ml-6 rounded-xl bg-[#FBF8F3] px-3 py-2 font-mono text-[11px] leading-5 text-[#6B6155]">
            {content.length > 300 ? `${content.slice(0, 300)}…` : content}
          </div>
        ) : null}
      </details>
    );
  }

  if (isBash && content) {
    return (
      <details className="group max-w-[88%]" open>
        <summary className="flex cursor-pointer list-none items-center gap-2 rounded-xl border border-[#E7DFD3] bg-[#F9F6F1] px-3 py-2 text-[13px] text-[#5C5247] transition-colors hover:bg-[#F4EEE4]">
          <span>🖥️</span>
          <span className="font-medium">命令输出</span>
          {status === 'error' ? (
            <span className="rounded-full border border-[#EBCFC6] bg-[#FFF1ED] px-2 py-0.5 text-[10px] text-[#A05545]">失败</span>
          ) : null}
          <ChevronRight className="ml-auto h-3.5 w-3.5 text-[#A99D8D] transition-transform group-open:rotate-90" />
        </summary>
        <pre className={[
          'mt-1 ml-6 overflow-x-auto rounded-xl p-3 font-mono text-[11px] leading-5',
          status === 'error'
            ? 'bg-[#2D1517] text-[#F07178]'
            : 'bg-[#1E1E1E] text-[#D4D4D4]',
        ].join(' ')}>
          {content}
        </pre>
      </details>
    );
  }

  if (hasDiff) {
    return (
      <div className="max-w-[88%] space-y-1">
        {diffFiles.map(file => (
          <details key={file.filePath} className="group" open>