Function StatusBadge

web/components/tools/ToolUseBlock.tsx:87–125

({
  isRunning,
  isError,
  startedAt,
  completedAt,
}: StatusBadgeProps)

}

function StatusBadge({
  isRunning,
  isError,
  startedAt,
  completedAt,
}: StatusBadgeProps) {
  if (isRunning) {
    return (
      <span className="flex items-center gap-1.5 text-xs text-brand-400">
        <Loader2 className="w-3.5 h-3.5 animate-spin" />
        <ElapsedTimer startMs={startedAt} />
      </span>
    );
  }

  const duration = completedAt ? completedAt - startedAt : null;
  const durationStr = duration
    ? duration < 1000
      ? `${duration}ms`
      : `${(duration / 1000).toFixed(1)}s`
    : null;

  if (isError) {
    return (
      <span className="flex items-center gap-1.5 text-xs text-red-400">
        <XCircle className="w-3.5 h-3.5" />
        {durationStr && <span>{durationStr}</span>}
        <span>Error</span>
      </span>
    );
  }

  return (
    <span className="flex items-center gap-1.5 text-xs text-green-400">
      <CheckCircle2 className="w-3.5 h-3.5" />
      {durationStr && <span>{durationStr}</span>}
    </span>
  );
}

// ─── Main component ───────────────────────────────────────────────────────────