Function ToolRow

apps/vis/web/src/components/analysis/TimelineTab.tsx:336–355

({ tc, stepDurationMs }: { tc: ToolCallNode; stepDurationMs?: number })

}

function ToolRow({ tc, stepDurationMs }: { tc: ToolCallNode; stepDurationMs?: number }) {
  const widthPct = stepDurationMs && tc.durationMs ? Math.max(2, (tc.durationMs / stepDurationMs) * 100) : 0;
  return (
    <div className="flex flex-wrap items-center gap-2 pl-3 font-mono text-[11px]">
      <span className="text-[var(--color-cat-tools)]">{tc.name}</span>
      <span className="text-fg-3 tabular" title="call → result elapsed">{formatDuration(tc.durationMs)}</span>
      {tc.outputBytes !== undefined ? (
        <span className="text-fg-3 tabular" title="result output size">{formatBytes(tc.outputBytes)}</span>
      ) : null}
      {tc.isError ? <Pill tone="error" variant="outline">error</Pill> : null}
      {tc.truncated ? <Pill tone="warning" variant="outline">truncated</Pill> : null}
      {tc.resultLineNo === undefined ? <Pill tone="warning" variant="outline">no result</Pill> : null}
      {widthPct > 0 ? (
        <div className="ml-auto h-1 w-24 bg-surface-2">
          <div className="h-1" style={{ width: `${widthPct}%`, backgroundColor: tc.isError ? 'var(--color-sev-error)' : 'var(--color-cat-tools)' }} />
        </div>
      ) : null}
    </div>
  );
}